vue引用高德地图api(输入提示插件)无法获取数据问题
在用vue做调度系统项目的时候引用高德地图api进行地点输入时需要提示可能的地点。就是高德地图api的输入提示插件,这有一个好处,高德地图api传过来的json中含有坐标,方便在地图上打点以及地图相关操作。看实例我需要在输入地址的时候可以显示可能的地址列表,如下图。官方实例:https://lbs.amap.com/api/javascript-api/example/input/inp...
·
在用vue做调度系统项目的时候引用高德地图api进行地点输入时需要提示可能的地点。就是高德地图api的输入提示插件,这有一个好处,高德地图api传过来的json中含有坐标,方便在地图上打点以及地图相关操作。
看实例
我需要在输入地址的时候可以显示可能的地址列表,如下图。
官方实例:https://lbs.amap.com/api/javascript-api/example/input/input-prompt
这个只能一个输入框用,我需要2个以上,所以将实例代码封到一个函数中,在input框获取焦点的时候执行函数,这样不管有多少个都可以。
<input class="form-control m-input tipinput" placeholder="" v-model="mainData.yongchedidian" id="yongchedidian" type="text" onfocus="map(this.id)" >
但是还存在一个问题,vue获取不到第三方插件引起的数据改变。所以给插件添加了一个监听事件,当选中某个值得时候利用Vue.set改变数据。如下
function map(id){
var auto = new AMap.Autocomplete({
input: id
});
AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
function select(e) {
//console.log(auto.input.id)
// console.log(e.poi.name)
Vue.set(app.mainData,auto.input.id,e.poi.name)
// console.log(app.mainData);
}
}
</script>
这样,选中那个值vue中得data也会跟着改变。
更多推荐
已为社区贡献5条内容
所有评论(0)