微信端其实也没多少可以所说的,其实就是仔细阅读百度开发者工具给出的百度地图API合适调用就对了,下面附链接地址,愿意学习的童鞋可以详细参考一下,
主要是一些逻辑上问题,仔细想想也就可以了,下面主要说说我在开发中用到的几个方法,
其实很简单的啦,只需要你在百度开发者申请一个密钥,然后向如下这么写:
2.如何实现自定位?
这里必须拓展一下,关于代码实现定位这个问题,定位分为2种(总共4种,IP定位,GPS定位,WIFI 三角测量定位,基地台三角测量定位,主要介绍以下两种)第一种是ip定位,会根据你当前的ip地址进行定位,这种定位比较可靠,它是操作系统实现的,详细了解可以看看这篇,百度地图定位(Android)贴Android平台下的自定位包路径);第二种就是浏览器定位,这个相对来说,如果你用的电脑浏览器的话,那么这个定位不太可靠,比如我在重庆南岸区,浏览器定位就定位在了渝中区,会有一定的偏差,他好像是根据浏览器的ip地址进行定位
3,如何加载地图?
在加载了百度给的js之后,需要对地图对象进行初始化,其实就是把加载出来的地图加载到一个div里面
页面里要有
<div id="allmap"></div>
js就可以这样了:
var map = new BMap.Map("allmap"); var point = new BMap.Point(106.53,29.55); map.centerAndZoom(point,16);
4.如何拿到网点数据?
所有的数据都是通过ajax异步从tomcat服务器上获取数据,实现的写法有很多,关于ajax获取数据相关的知识点比较多,所以我单独写一遍相关的文章,可以用来参考或者讨论(贴上ajax详解链接地址)
5,如何在地图上展示网点以及网点的信息?
百度地图提供了相关工具marker对象和point对象,代码(贴marker声明和point声明以及infowindow声明)
var mk = new BMap.Marker(r.point); var point = new BMap.Point(106.53,29.55);
searchInfoWindow = new BMapLib.SearchInfoWindow(map,content,{ title : title1,width : 290,// 宽度 height : 105,// 高度 panel : "panel",// 检索结果面板 enableAutoPan : true,// 自动平移 searchTypes : [ BMAPLIB_TAB_SEARCH,// 周边检索 BMAPLIB_TAB_TO_HERE,// 到这里去 BMAPLIB_TAB_FROM_HERE // 从这里出发 ] });
根据后台返回的数据,对marker进行分组,展示,每个marker都有相关的事件驱动(click,drag事件)(贴marker事件代码),所有信息都是放在infowindow生成的div里面
var title1 = branch.branchName; var content = "<div style='font-family:微软雅黑'>地址:" + branch.address + "</div>" + "<div style='font-family:微软雅黑'>营业时间<br>" + branch.openHours + "</div>" + "<div style='font-family:微软雅黑'>支付方式:" + branch.payMethod + "</div>" + "<div style='font-family:微软雅黑'>服务内容:" + branch.services + "</div>" + "<div style='font-family:微软雅黑'>电话:" + branch.telephone + "</div>" + "<div style='font-family:微软雅黑'>" + "</div>";
searchInfoWindow = new BMapLib.SearchInfoWindow(map,// 到这里去 BMAPLIB_TAB_FROM_HERE // 从这里出发 ] });
function searchNear() { var center = null; if (flag) { center = map.getCenter(); getDataByDistance(center.lat,center.lng,1000); flag = false; } else { searchNearWithoutLocation(); } }
getDataByDistance内的部分代码:
$.ajax({ url : url,type : "post",data : sdata,success : function(data) { // 已经拿到数据 if (flag) { map.clearOverlays(); flag = false; } if(data.branches.length==0){ //alert('没有找到附近的网点'); loadinghide(); } branches = data.branches; loadMarkers(branches); loadinghide(); } });如果地图是拖动过的或者说还没有定位,那么我们就应该自定位
极速版不提供自定位,大众版才提供,实现方法:
function searchNearWithoutLocation(e) { map.clearOverlays(); loadingshow(); var geolocation2 = new BMap.Geolocation(); flag = true; geolocation2.getCurrentPosition(function(r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var mk = new BMap.Marker(r.point); map.centerAndZoom(r.point,16); center = map.getCenter(); getDataByDistance(center.lat,1000); map.addOverlay(mk); var content = "我现在的位置"; addClickHandler(content,mk); } else { alert('Failed' + this.getStatus()); } },{ enableHighAccuracy : true }) loadinghide(); }
最后一点:从url里获取参数,很简单的,就是正则表达式而已
//获得url传递来的参数 function request(name) { if (location.href.indexOf("?") == -1 || location.href.indexOf(name + '=') == -1) { return ''; } var queryString = location.href .substring(location.href.indexOf("?") + 1); queryString = decodeURI(queryString); var parameters = queryString.split("&"); var pos,paraName,paraValue; for (var i = 0; i < parameters.length; i++) { pos = parameters[i].indexOf('='); if (pos == -1) { continue; } paraName = parameters[i].substring(0,pos); paraValue = parameters[i].substring(pos + 1); if (paraName == name) { return unescape(paraValue.replace(/\+/g," ")); } } return ''; }
总的来说,就是以上这几个问题,没有什么难度,认真看百度API以及实例就ok啦
原文链接:https://www.f2er.com/ajax/163814.html