对于利用地图来定位展示这方面一直挺好奇的，之前倒是用过百度地图API，但也只是简单的利用地图生成器，给网站加一个地图地址。就像下面这样：
IMG_20160408_1.png
今天便针对地图做了一番尝试，记录如下。
微信地图
大家应该都使用过微信的发送/共享位置功能，效果如下：
IMG_20160408_3.png
现在很多公司都会依托微信公众号做开发，以期更好的展示或者直接利用公众号交易。而微信平台开发便涉及地图功能：
IMG_20160408_2.png
百度地图API
IMG_20160408_4.png
测试内容如下：
使用百度地图API功能
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.3640600000, 39.9961000000);
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
利用浏览器定位（其他还有IP/城市名/经纬度定位等）
//浏览器定位
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);
//alert('您的位置：' + r.point.lng + ',' + r.point.lat);
}
else {
alert('failed' + this.getStatus());
}
}, {enableHighAccuracy: true})
添加带有定位的导航控件
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function (e) {
// 定位成功事件
var address = "";
//address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("位置更新成功:" + "\n\r" + address);
});
geolocationControl.addEventListener("locationError", function (e) {
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
添加自定义控件
// 定义一个控件类,即function
function ZoomControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMap.Size(20, 20);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function (map) {
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.innerHTML = "<p class='text'>立即购买</p>"
//div.appendChild(document.createTextNode("立即下单"));
// 设置样式
div.className = "btn";
// 绑定事件,点击一次放大两级
div.onclick = function (e) {
alert("下单喽~")
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
完整代码：
百度地图API测试
测试效果如下图所示：
IMG_20160408_5.png
高德地图API
高德地图也提供类似的服务，从下图来看，和百度类似（高德地图我并没有测试）。
IMG_20160408_6.png
IMG_20160408_7.png
网友评论