利用百度地图API定位

对于利用地图来定位展示这方面一直挺好奇的，之前倒是用过百度地图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 = "
立即购买
"
    //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