微信相关部分

微信端其实也没多少可以所说的，其实就是仔细阅读百度开发者工具给出的百度地图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,// 到这里去
		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,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链接)

微信相关部分

相关文章