微信相关部分

前端之家收集整理的这篇文章主要介绍了微信相关部分前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

原文链接:https://www.f2er.com/ajax/163814.html

猜你在找的Ajax相关文章