首页 / JAVASCRIPT / 百度地图api如何使用

百度地图api如何使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了百度地图api如何使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4001字，纯文字阅读大概需要6分钟。

内容图文

如果想用百度地图api，首先需要先获取一个百度地图api的密钥，然后引入百度地图的api，接下来，我们详细介绍下获取、引入api密钥的技巧，以及通过代码给大家详解下百度地图api如何使用，具体请看下文。

首先 ，如果想调用百度地图api，你需要获取一个百度地图api的密钥。

申请密钥很简单，在百度地图api的首页就有相关链接，填写相关信息百度就会给你一个密钥了。

接下来，就是引入百度地图的api

关键代码如下：

代码如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script>

接下来我们就可以创建一个地图试试看了。（Js代码）

代码如下:
var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(120.391655,36.067588);  // 创建点坐标
map.centerAndZoom(point, 15);
//map.centerAndZoom("北京", 15);
//map.centerAndZoom("Hongkong", 15);    
           
这里需要说明三点:

1.map.centerAndZoom方法创建地图，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。（如果拼写正确，可以根据城市的英文名称来创建）

2. map.centerAndZoom第二个参数是地图缩放级别，最大为19，最小为0。（但实际当缩小到3的时候就已经。。。）

百度地图api如何使用 - 文章图片 百度地图api如何使用 - 文章图片

3.BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。)，填写相关容器的id。

关于地图大小：

可以通过

代码如下:
map.setZoom();

方法主动控制地图大小级别。

也可以通过设置

代码如下:
map.enableScrollWheelZoom(true);

利用鼠标滚轮控制大小。

百度地图提供了非常丰富的功能空间共我们使用。

1.Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

2.NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。

3.OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。

4.ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。

5.MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。

6.CopyrightControl：版权控件，默认位于地图左下方。

7.GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

效果图

百度地图api如何使用 - 文章图片 

代码如下:
map.addControl(new BMap.NavigationControl());//缩放平移控件
map.addControl(new BMap.ScaleControl());    //比例尺
map.addControl(new BMap.OverviewMapControl());//缩略图
map.addControl(new BMap.MapTypeControl()); //地图类型
map.setCurrentCity("青岛");

注意：当设置城市信息时，MapTypeControl的切换功能才能可用


地图事件：
百度地图API中的大部分对象都含有addEventListener方法，我们可以通过该方法来监听对象事件。
实例：
代码如下:
map.addEventListener("click", function(){   
 alert("您点击了地图。");   
});

当我们不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

代码如下:
map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

地图遮盖物:

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。

Marker：标注表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

标注示例：

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

百度地图api如何使用 - 文章图片

以上说明就是本文的全部内容，希望对大家使用百度地图api有所帮助。

内容总结

以上是互联网集市为您收集整理的百度地图api如何使用全部内容，希望文章能够帮你解决百度地图api如何使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/356815.html

来源：【匿名】