百度地图API

最新推荐文章于 2022-05-03 14:30:54 发布

goodcaoyu

最新推荐文章于 2022-05-03 14:30:54 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/goodcaoyu/article/details/109323695

版权

1、注册百度账号，在http://lbsyun.baidu.com/apiconsole/key?application=key 页面申请密钥(AK)

2、页面引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

3、地图需要一个HTML元素作为容器，这样才能展现到页面上，创建了一个div元素。

<body>
	<div id = "allmap"></div>
</body>

4、实例化地图

<script type="text/javascript">
 
    //百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
     map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());   //平移缩放控件
    map.addControl(new BMap.ScaleControl());        //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图
    map.addControl(new BMap.MapTypeControl());      //地图类型
    map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
 
    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
</script>

到这里，地图已经可以显示了。
在这里插入图片描述