百度地图搜索并上传位置

By AYE 0
var start_point = {lng: 116.404,lat: 39.915}
var map = new BMap.Map("container");
map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
// 根据经纬度自适应zoom和中点
map.centerAndZoom(new BMap.Point(start_point.lng, start_point.lat), 11);  
var geoc = new BMap.Geocoder() // 根据经纬度获取地址
setTimeout(function() {
    $('#geo').val(JSON.stringify(start_point))
    // addMarker(start_point, '')
}, 100)

// 添加定位控件
var geolocationControl = new BMap.GeolocationControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
});
geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    map.clearOverlays();  
    var addComp = e.addressComponent;
    console.log(addComp)
    var pp = e.point;
    var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
    $('#suggestId').val(address)
    map.centerAndZoom(pp, 14);
    $('#geo').val(JSON.stringify(pp))
    addMarker(pp, address);

});
geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    console.log(e.message);
});
map.addControl(geolocationControl);

// 定义一个控件类,即function
function ZoomControl() {
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(10, 10);
}

// 通过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 id="r-result" style="background:#fff;">搜索地址:<input type="text" id="suggestId" size="20" value="无锡市" style="width:150px;background:#fff;font-size:12px;color:#333;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>';
    div.innerHTML = `
<div id="r-result" >
<span>搜索:</span>
<input type="text" id="suggestId" size="20" value="无锡市" />
<input type="hidden" id="geo" value="" />
<input type="button" id="updateAddress" value="上传位置" />
</div>
<div id="searchResultPanel"></div>
`
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    // 将DOM元素返回
    return div;
}

// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    {"input" : "suggestId"
     ,"location" : map
    });
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    $("#searchResultPanel").html(str);
});

var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    $("#searchResultPanel").html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
    setPlace();
});

function setPlace(){
    map.clearOverlays();    //清除地图上所有覆盖物
    function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 14);
        $('#geo').val(JSON.stringify(pp))
        addMarker(pp, '')
    }
    var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
}

function addMarker(pt, address) {
    var marker = new BMap.Marker(pt)
    map.addOverlay(marker); 
    marker.enableDragging();
    var label = new BMap.Label(address,{offset:new BMap.Size(20,0)});
    label.setStyle({
        color : "#666",
        fontSize : "12px",
        height : "24px",
        lineHeight : "24px",
        fontFamily:"微软雅黑",
        padding: '0 5px 0 5px',
        background: '#fff',
        border:'0',
        borderRadius: '3px',
    });
    marker.setLabel(label);
    geoc.getLocation(pt, function(rs){
        console.log(rs)
        var addComp = rs.addressComponents;
        newaddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
        label.setContent(newaddress)
    });
    // 标注拖动事件 
    marker.addEventListener("dragend", function(e){ 
        var pt = e.point;
        $('#geo').val(JSON.stringify(pt))
        var newaddress;
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            newaddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            label.setContent(newaddress)
        });
    }); 
}

// 上传位置
$('#updateAddress').click(function(){
    var geostr = $('#geo').val()
    console.log( geostr )
})