百度地图api基本用法

绝地灬酷狼 2022-03-19 06:29 564阅读 0赞

(学习留存,如有侵权,请告知,立刻删除!)

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

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

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

关键代码如下:

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

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

  1. var map = new BMap.Map("container"); // 创建地图实例
  2. var point = new BMap.Point(120.391655,36.067588); // 创建点坐标
  3. map.centerAndZoom(point, 15);
  4. //map.centerAndZoom("北京", 15);
  5. //map.centerAndZoom("Hongkong", 15);

这里需要说明三点:

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

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

021428493299472.png021428597209463.png

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

关于地图大小:

可以通过map.setZoom();方法主动控制地图大小级别。

也可以通过设置map.enableScrollWheelZoom(true);利用鼠标滚轮控制大小。

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

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

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

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

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

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

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

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

效果图

021448120646550.png

  1. map.addControl(new BMap.NavigationControl());//缩放平移控件
  2. map.addControl(new BMap.ScaleControl()); //比例尺
  3. map.addControl(new BMap.OverviewMapControl());//缩略图
  4. map.addControl(new BMap.MapTypeControl()); //地图类型
  5. map.setCurrentCity("青岛");
  6. 注意:当设置城市信息时,MapTypeControl的切换功能才能可用
  7. 地图事件:
  8. 百度地图API中的大部分对象都含有addEventListener方法,我们可以通过该方法来监听对象事件。
  9. 实例:
  10. map.addEventListener("click", function(){
  11. alert("您点击了地图。");
  12. });

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

  1. map.removeEventListener("click", functionA);
  2. map.addEventListener("click", functionA);

地图遮盖物:

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

Marker:标注表示地图上的点,可自定义标注的图标。

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

Polyline:表示地图上的折线。

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

Circle: 表示地图上的圆。

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

标注示例:

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

021523144237302.png

发表评论

表情:
评论列表 (有 0 条评论,564人围观)

还没有评论,来说两句吧...

相关阅读

    相关 地图api基本

    (学习留存,如有侵权,请告知,立刻删除!) 首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥。 申请密钥很简单,在百度地图api的首页就有相关链接,填写

    相关 JAVA 地图 API

    唉。。已经无力吐槽废话。。直接进入正题吧。。第一次写。。如有不足之处请谅解。。哦对了。。我们这个是 web 端 获取 API 的官方文档 :[http://lbsyun.ba