Vue 封装关键字提示地图组件无效
Vue-cli项目,需要封装关键字提示地图组件,
这种效果,然而组件引入后,只有地图显示,输入框搜索没有作用
mounted(){
this.$nextTick(() => {
var th = this
// 创建Map实例
var map = new BMap.Map("allmap1");
// 初始化地图,设置中心点坐标,
// var point = new BMap.Point(121.160724,31.173277); // 创建点坐标,汉得公司的经纬度坐标
map.centerAndZoom('北京', 15);
map.enableScrollWheelZoom();
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId"
, "location": map
})
console.log(ac)
var myValue
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
this.address_detail = 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);
})
}
})
}
求大神解答。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论