文档章节

地图API使用

 鞠荣超
发布于 2017/07/16 15:49
字数 500
阅读 4
收藏 0

初始化:

首先,在代码头部引入文件:

<script src="http://api.map.baidu.com/api?v=2.0&ak=5WE1N8e7lBWV8zkKXr3E0EkjZ5BN9dRj" type="text/javascript"></script> 其中的5WE1N8e7lBWV8zkKXr3E0EkjZ5BN9dRj为在百度地图开放平台中通过百度账号申请的AK

然后通过

      var map =new BMap.Map("divid");//注意只能是id且不用加#;来实例化一个地图对象;

      然后通过对map进行操作;来展现自己的地图

      map.centerAndZoom(new BMap.Point(x,y),11);//其中的xy为经纬度,11,为区级;  

添加控件:

可以使用map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:

      缩略图控件:map.addControl(new BMap.NavigationControl());

      比例尺控件:map.addControl(new BMap.ScaleControl());

       缩略图:map.addControl(new BMap.OverviewMapControl());

定义控件位置:

    BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。

    BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。

    BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。

    BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。

   eg:map.addControl(new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));

    

   BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。

   BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。

   BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。

   BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能

eg:map.addControl(new BMap.OverviewMapControl({type:BMAP_NAVIGATION_CONTROL_PAN}));

 

覆盖物添加:

    var point = new BMap.Point(111,111);//定义覆盖物所在的点坐标

    var marker=new BMap.Marker(point);

     map.addOverlay(marker);//将覆盖物添加到map中

   覆盖物可拖动:

      marker.enableDragging();同时,marker可以添加事件

    eg: marker.on("dragend",callback);//zepto写法

         marker.addEventListener("dragend",callback);//原生写法

因为可能造成大量覆盖物的堆积;所以api中有清除覆盖物的方法:

     map.removeOverlay(marker);

     marker.dispose(); 

创建窗口:

var opts = { width : 250, // 信息窗口宽度

                  height: 100, // 信息窗口高度

                 title : "Hello" // 信息窗口标题 }

      var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象                                 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口

© 著作权归作者所有

粉丝 0
博文 3
码字总数 2392
作品 0
私信 提问
【高小爱课堂】_地图API开发者教程(全平台精华版)

一、使用须知 二、坐标相关问题 三、标注问题 四、定位相关问题 五、云图 六、地图API 1)Javascript API 2)Android API 3)iOS API 4)Windows Phone 及win8 API 5)URI API ▼使用须知 Q:...

高德LBS开放平台
2014/06/13
1K
0
各家地图公司地图开发API比较

各家地图公司地图开发API比较 一、谷歌地图API地址:http://code.google.com/apis/maps/ 基于Google Maps,能够使用 JavaScript 将 Google Maps 嵌入网页中。API 提供了大量实用工具用以处理...

睡得
2015/05/25
2.5K
5
BMap:WEB 服务API

ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScrip...

吞吞吐吐的
2017/11/07
0
0
百度地图新手教程1(转载自百度)

简介 1.什么是百度地图API? 2.面向的读者 3.坐标转换 4.获取API 5.开发移动平台上的地图应用 6.异步加载 7.兼容性 8.版本说明 9.问题解答 什么是百度地图API? 百度地图API是一套由JavaScr...

长平狐
2013/01/06
3.8K
0
干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及...

wdlhao
2018/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

texlive安装

Installing to: D:/bin/texlive/texlive/2019Installing [001/307, time/total: ??:??/??:??]: adobemapping [2130k]Installing [002/307, time/total: 00:03/08:57]: ae [84k]Installing......

MtrS
58分钟前
2
0
运维规范

命名规范 发布流程 监控告警 故障定位 状态 日志 监控

以谁为师
今天
2
0
约瑟夫环(报数游戏)java实现

开端 公司组织考试,一拿到考题,就是算法里说的约瑟夫环,仔细想想 以前老师将的都忘了,还是自己琢磨把~ package basic.gzy;import java.util.Iterator;import java.util.LinkedList;...

无极之岚
今天
3
0
Kernel字符设备驱动框架

Linux设备分为三大类:字符设备,块设备和网络设备,这三种设备基于不同的设备框架。相较于块设备和网络设备,字符设备在kernel中是最简单的,也是唯一没有基于设备基础框架(device结构)的...

yepanl
今天
3
0
Jenkins 中文本地化的重大进展

本文首发于:Jenkins 中文社区 我从2017年开始,参与 Jenkins 社区贡献。作为一名新成员,翻译可能是帮助社区项目最简单的方法。 本地化的优化通常是较小的改动,你无需了解项目完整的上下文...

Jenkins中文社区
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部