百度地图API的使用——网页中写入百度地图

红太狼 2024-02-17 15:44 28阅读 0赞

我们时常在旅行网站、商城网站等都会有一个定位功能和地图出现！那么我们应该要怎样实现这个功能呢？我们自己去实现一个地图，怎样的解决方式显然是不正确的。往往我们都是通过调用成熟的百度地图API，google地图API来实现这个功能。

要使用百度地图一般来说是要去申请一个百度地图的key，然后我们就可以开始写代码了。

申请地址：[http://developer.baidu.com/map/index.php?title=jspopular][http_developer.baidu.com_map_index.php_title_jspopular]

1、引入百度地图的js库：

2.在<body>中加入显示的<div>

3.加入显示地图的JavaScript

就这么简单我们就可以将地图显示出来了，下面是所有的源码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>同步加载</title>
    <script src="http://api.map.baidu.com/api?v=1.2"></script>
    </head>
    <body>
    <div id="map" style="width:500px;height:320px;"></div>
    <script>
    var map = new BMap.Map("map");
    map.centerAndZoom("宁波", 8);
    map.addControl(new BMap.NavigationControl());   
    map.addControl(new BMap.ScaleControl());   
    map.addControl(new BMap.OverviewMapControl()); 
    map.enableScrollWheelZoom();
    </script>
    </body>
    </html>

效果如下：

![Center][]  
授人以鱼不如授人以渔。

下面把百度地图api的开放平台地址分享给大家，相信大家访问后必有收获。

[http://developer.baidu.com/map/jsdemo.htm\#a1\_2][http_developer.baidu.com_map_jsdemo.htm_a1_2]

[http_developer.baidu.com_map_index.php_title_jspopular]: http://developer.baidu.com/map/index.php?title=jspopular
[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a08d567b35ad49f2b6b40b2f78034419.png
[http_developer.baidu.com_map_jsdemo.htm_a1_2]: http://developer.baidu.com/map/jsdemo.htm#a1_2