百度地图API自定义地图
一、使用说明 JavaScript API v1.4及以前版本无须申请密钥(ak),自v1.5版本开始需要先申请密钥(ak),才可使用。仅JavaScript API V2.0 版本支持https,其他JavaScript API版本均不支持。手机端引用需要添加meta标签<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> (这里需要注意一点:meta标签中的值不能改变,有些移动端写法可能改变了meta标签的值会造成移动端地图字体特别小的问题)。在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标( WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09。
二、百度地图使用
html中
<div style="width:100%;height:550px;" id="map"></div> //一定要有宽度和高度来显示地图
1、引用百度地图API文件
http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本,使用JavaScript APIv1.4及以前版本可使用此方式引用。 http://api.map.baidu.com/api?v=2.0&ak=您的密钥 //使用JavaScript APIv2.0请先申请密钥ak,按此方式引用。
2、创建地图实例
var map = new BMap.Map("map"); //BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例,参数可以是元素id也可以是元素对象
3、创建点坐标
var point = new BMap.Point(116.404, 39.915); //用BMap命名空间下的Point类来创建一个坐标点
4、地图初始化
map.centerAndZoom(point, 15); //BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。
以上这样就可以实现一个百度地图的简单调用
5、地图状态的变化
map.panTo(new BMap.Point(116.409, 39.918)); //panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
6、添加控件配置
map.enableScrollWheelZoom(true); //启用滚轮放大缩小//向地图中添加缩放控件var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrlNav);//向地图中添加缩略图控件var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});map.addControl(ctrlOve);//向地图中添加比例尺控件var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrlSca);//地图标记点击事件;info是信息数组,index是信息数组中索引map.clickelen = function(elem,info,index){ elem.openInfoWindow(info[index]);};
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件map.addControl(new BMap.ScaleControl()); //添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略图控件
7、修改控件样式
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} //修改平移控件样式 map.addControl(new BMap.NavigationControl(opts));
var opts = {offset: new BMap.Size(150, 5)} //修改比例尺的偏移位置 map.addControl(new BMap.ScaleControl(opts));
8、判断是否支持h5浏览器定位
function map_init() { //判断是否支持h5浏览器定位start map= new BMap.Map("map"); if (navigator.geolocation){ window.navigator.geolocation.getCurrentPosition(function(position){ //ios10 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(position){ lat = position.point.lat; lng = position.point.lng; mapGPS(lat,lng,10); //获取成功定位后执行的函数 },function(error){ alert("errorCode:"+error.code+",errorMessage:"+error.message); console.log("errorCode:"+error.code+",errorMessage:"+error.message); }); //IOS10 end }, function(error){ // oalert("GPS信号不稳定,无法精确定位"); function theLocation(cityName){//根绝城市名定位 var city = cityName; if(city != ""){ map.centerAndZoom(cityName,11); // 用城市名设置地图中心点 } } function myFun(result){ var cityName = result.name; //获取城市名cityName theLocation(cityName); } var myCity = new BMap.LocalCity(); myCity.get(myFun); }); }else{ alert("无法获取当前位置"); } //判断是否支持h5浏览器定位end}
9、动态添加多个标注点以及点击标注点弹出信息框
var point = new Array(); //存放标注点经纬信息的数组var marker = new Array(); //存放标注点对象的数组var info = new Array(); //存放提示信息窗口对象的数组var markerArr;//获取到的数据集合var markerArrlen;//后台传过来的数据长度
//调用地图function mapall(markerArr,markerArrlen,point,marker,info,markMan){ for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].lng ; // var p1 = markerArr[i].lat ; //按照原数组的point格式将地图点坐标的经纬度分别提出来 var me_point = new window.BMap.Point(p0, p1); //循环生成新的地图点 //将gps坐标转换成百度坐标 markMan++; var me_point2 = new window.BMap.Point(p0, p1); //循环生成新的地图点 var imgurl ="${context}/resources/cellar/images/map_me2.png"; var myIcon = new BMap.Icon(imgurl, new BMap.Size(18,33)); marker[i] = new BMap.Marker(me_point2,{icon:myIcon}); // 创建标注 map.addOverlay(marker[i]); info[i] = new window.BMap.InfoWindow("<p class='addresstext'>姓名:" + markerArr[i].name + "</br>地址:" + markerArr[i].address + "</br> 电话:" + markerArr[i].mobile + "</br></p >"); // 创建信息窗口对象 if(markMan==parseInt(markerArrlen)){ for(var h=0;h<markerArr.length;h++){ //标记绑订点击事件; var info2 = info; marker[h].index=h; marker[h].addEventListener("click", function(){ map.clickelen(this,info2,this.index); }); } } }}
10、清除之前添加信息
map.clearOverlays(); //清除之前添加的标注等
11、让自己写的所有地图标注显示在最佳视野内的实现方法
map.setViewport(viewpoints);
这里需要注意的是:viewpoints必须是个数组,不能是单个点。还可能遇到的bug:viewpoints按数组添加的,但是刚进地图没有显示出来得缩小地图才能看到,可能的原因是:map.centerAndZoom("北京市", 12); map.setViewport(points); //你的centerAndZoom函数设置成城市名了,该情况下百度会做很多后续处理,map.setViewport(points);这句代码是执行了的,但是map.centerAndZoom("北京市", 12); 这句代码好像有类似回调函数之类的操作,他会覆盖map.setViewport(viewpoints);这句代码的执行结果。
转载于:https://www.cnblogs.com/wanan-01/p/7207868.html
百度地图API自定义地图相关推荐
- php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 高德地图开发自定义地图样式
1.首先打开高都地图api自定义地图界面(自定义地图) 2.点进去,进行自定义地图配置 自定义样式 3.定义结束,点击发布 4.接下来点击使用自定义地图,会生成一串码 5.点击复制,在地图初始化调用这 ...
- 根据百度地图API自定义切换地图类型为卫星或普通
业务场景 根据实际业务场景的需要,不能直接使用百度地图的控件,所以打算用百度地图API中map类的setMapType()方法实现.在Vue3中使用百度地图API切换地图类型为卫星或普通,创建一个自定 ...
- python + 高德地图API实现地图找房
python + 高德地图API实现地图找房 项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
- 百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
- 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
- 百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式 当修改到心仪的样式时,点击生成JSON,就会 ...
- 百度地图API自定义点路书,路书点击事件,路书速度动态改变
前一段时间研究百度地图路书,查了很多资料也看源码,总结了一下如下 代码中有三个图片我放在下面,自行下载重命名和代码里面的名字保持一致,并且同代码放在同一个目录里面,代码中注释也很详细,可自行copy ...
- Android中应用百度地图API开发地图APP实例-显示百度地图
场景 效果 在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY http://lbsyun.baidu.com/index.php 申请API_KEY 登录百度开放平台后找到控制台下 ...
最新文章
- Tomcat 的 catalina.out 日志分割
- ARP解决方法/工具 真假ARP防范区别方法 ARP终极解决方案
- java 入门-helloWorld
- 037_Unicode对照表三
- BZOJ3626 LNOI2014 LCA 树链剖分
- Delphi的StringReplace[转]
- 未来计算机的景象,科幻场景即将实现,未来云电脑!
- 花书+吴恩达深度学习(十九)构建模型策略(训练模型顺序、偏差方差、数据集划分、数据不匹配)
- 恢复初始快捷键_CAD常用命令快捷键大全,47个快捷键50个CAD技巧,教你快速画图...
- 为何virtual析构函数不能是protected?
- 网上测试性格的软件依据是什么意思,(观点)mbti性格测试如此流行,它有科学依据吗?...
- 基于minio及tus断点续传及断点下载解决方案
- oracle短表和长表的区别,人口普查长表哪些人填和短表有什么区别
- 一年成为Emacs高手 (像神一样使用编辑器)
- The Flee Plan of Groundhog(DFS)
- 全国高校恋爱关系图谱:北大受宠爱,浙大最孤独
- 软件工程第一次作业——制作个人简介
- __virtual__ returned False: cannot import name certs ---saltstack异常解决
- iscsi 远程连接磁盘
- 洛谷P1897 电梯里的爱情
热门文章
- 【LeetCode】【数组】题号:495,提莫攻击
- lxml.etree.SerialisationError: IO_ENCODER
- ENVI学习总结(一)——自定义坐标系
- 实习成长之路:MySQL十:怎么给字符串字段加索引?
- HDFS分布式文件系统知识总结
- Flutter之SnackBar原理详解
- java课时,java学习笔记_课时一
- 备案号链接工信部_网站主页底部网站备案号的悬挂和链接的工作通知
- adb ps shell 查看进程_Appium学废系列(三) adb调试桥命令
- Spring深入学习之IOC与AOP