微信端其实也没多少可以所说的,其实就是仔细阅读百度开发者工具给出的百度地图API合适调用就对了,下面附链接地址,愿意学习的童鞋可以详细参考一下,
主要是一些逻辑上问题,仔细想想也就可以了,下面主要说说我在开发中用到的几个方法,
1,如何在自己的程序中添加百度地图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, content, {
title : title1,
width : 290, // 宽度
height : 105, // 高度
panel : "panel", // 检索结果面板
enableAutoPan : true, // 自动平移
searchTypes : [ BMAPLIB_TAB_SEARCH, // 周边检索
BMAPLIB_TAB_TO_HERE, // 到这里去
BMAPLIB_TAB_FROM_HERE // 从这里出发
]
});
6,搜索附近,直接贴代码吧
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, center.lng, 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啦
下面给出百度地图API给的相关详细参考(此处贴API链接)