本示例代码将在jquery基础库上实现。
key用的是百度地图,在创建应用时,我选择的是H5应用,应用在浏览器端,白名单记得要填*,这样可以适用于所有场景。
具体Demo,百度平台很详细,我的应用场景主要在于比较两点间的距离,不同的地理定位展示不同的图片。
先来看下HTML,很简单的两行
<div id="allmap"></div>
<div id="showImg"></div>
CSS没有相关的代码,自己修改的吧。
主要是JS,实现步骤为:写好一个定位(这个是用来做比较的中心点);获取用户当前经纬度;判断两点间的距离。
由于本项目涉及了两个地点(经纬度均已稍作改动)的距离判断,所以有了pointA、pointC。
//地图定位
var $allmap = $("#allmap");
var $showImg = $("#showImg");
var map = new BMap.Map("allmap"); //创建地图
var pointA = new BMap.Point(116.02662744,36.75329789); //创建pointA坐标点
var pointC = new BMap.Point(110.793606,33.63409); //创建pointC坐标点
map.centerAndZoom(pointA,12); //打开本页面将进入pointA坐标点为中心的,大小为12的地图
获取用户当前位置:
//获取当前用户的定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point); //创建标注
map.addOverlay(mk); // 将标注添加到地图中
map.panTo(r.point);
var pointB = new BMap.Point(r.point.lng,r.point.lat); //用户当前的位置
var distanceA = map.getDistance(pointA,pointB).toFixed(2); //用户与pointA的距离
var distanceB = map.getDistance(pointA,pointC).toFixed(2); //用户与pointC的距离
console.log(JSON.stringify(pointA)); //JSON.stringify:从一个对象中解析出字符串
console.log(JSON.stringify(pointB));
console.log(distanceA);
console.log(distanceB);
if(distanceA <= 50000){ //JS为弱类型语言,
//所得distanceA是数字字符串,
//可以直接判断distanceA与设定的距离大小
$allmap.hide();
$showImg.show();
$showImg.css("background-image","url(pointA图片地址)");
}else if(distanceC <= 50000){
$allmap.hide();
$showImg.show();
$showImg.css("background-image","url(pointC图片地址)");
}
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
以上是判断两点间的距离,不同的城市展示不同的图片,目前只是两个,可以在JS里实现,当然,若是实现多个城市,还是得和后台配合。