高德地图使用步骤介绍

最新推荐文章于 2022-01-27 15:36:58 发布

原创最新推荐文章于 2022-01-27 15:36:58 发布 · 5.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用高德地图API进行二次开发。首先需要申请一个key，然后在页面上创建一个div作为地图容器，接着引入高德地图的JS脚本。通过JavaScript初始化地图，并设置中心点坐标。最后，可以根据需求添加更多功能和应用。如果需要与后台交互，可以使用WebMethod配合调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用高德地图需要key这个要申请或者有使用测试key。是在页面引用这个key，才能调用高德地图进行二次开发。

1.在画地图的时候，初始化前应该申请一个“地方”用来放置地图，比如<div id="Map"></div>

2.可以在页面直接添加<script src="http://webapi.amap.com/maps?v=1.2&key=yourkey" type="text/javascript"></script>脚本。也可以

在页面放一个服务器端控件，然后赋值文本，如下所示

Literal1.Text = "<script src="http://webapi.amap.com/maps?v=1.2&key=yourkey" type="text/javascript"></script>";

然后再脚本里初始化，比如

3.<script type ="text/javascript" language = "javascript">
function mapInit() {
var position = new AMap.LngLat(117.97506, 37.380109); //创建中心点坐标
var mapObj = new AMap.Map("Map", { center: position }); //创建地图实例
var opts = {
pov: {
heading: 270,
pitch: 0
},
position: position
};
var panorama = new AMap.Panorama('Map', opts);
}
mapInit();

</script>