需求:
输入详细地址在地图显示并标
代码
mounted() {
this.$nextTick(function () {
var th = this
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId",
"location": map
})
var myValue
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province_name + _value.city_name + _value.district + _value.street + _value.business;
this.addShopRuleForm.address = myValue
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(th.userlocation, 18);
map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
//测试输出坐标(指的是输入框最后确定地点的经纬度)
map.addEventListener("click",function(e){
//经度
console.log(th.userlocation.lng);
//维度
console.log(th.userlocation.lat);
})
map.setCurrentCity('北京')
}
})
},