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 )
})