vue获取鼠标点击位置坐标,
这篇文章主要介绍了详解某视频剪辑软件实现坐标拾取器功能示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求
1、搜索具体地址，自动填写经纬度，并在地图上标记
2、点击地图上一点，可重新填写经纬度并且标记
代码
在数字正射影像图新建差异渲染地图
El-表单-项目标签=店铺地址prop=地址
埃尔输入v-model=fristForm.address/el输入
埃尔输入
"再见"
v-model=fristForm。经度
占位符=经度
/el-input
埃尔输入
"再见"
v-model=fristForm.latitude
占位符=纬度
/el-input
El-button size= mini type= primary @ click=搜索关键字
搜索/el-button
/El-表单-项目
span class=更改地址点击地图更换分店定位地址/span
！-渲染地图的差异容器-
div id= container class= mapbox /div
射流研究…定义地图变量并设置需求
var searchService，geocoder，map，marker array=[]；
脚本
导出默认值{
已安装(){
这个。init()；
},
方法：{
init() {
变那个=这个
var center=新QQ。地图。latlng(39.916527，116.397128)；
var图=新QQ。地图。地图(文档。getelementbyid( container )，{
中心：中心，
缩放：13倍
});
var latlngBounds=新QQ。地图。latlngBounds()；
qq.maps.event.addListener(map， click ，function(event) {
console.log(事件);
那个。一年级。经度=事件。最新液化天然气。获取LNG()；//经度
那个。一年级。纬度=事件。最新液化天然气。get lat()；//纬度
if(标记数组){
对于（让我在马克萨里中){
标记数组[I].设置映射(空)；
}
}
var marker=new qq.maps.Marker({
地图：地图，
位置：event.latLng
});
标记数组。推(标记)；
});
geocoder=new qq.maps.Geocoder({
完成：功能（结果){
console.log(结果);
那个。一年级。经度=结果。细节。位置。液化天然气；
那个。一年级。纬度=结果。细节。位置。lat
地图。设置中心(结果。细节。位置)；
var marker=new qq.maps.Marker({
地图：地图，
位置：结果。细节。位置
});
标记数组。推(标记)；
}
});
},
},
//搜索地址
searchKeyword() {
var关键字=this。一年级。地址；
这个。清除覆盖(标记阵列)；
//根据输入的城市设置搜索范围
//searchService.setLocation(北京);
//根据输入的关键字在搜索范围内检索
如果(关键字){
//searchService.search(关键字);
geocoder.getLocation(关键字);
}否则{
警报(请输入地址);
}
},
}
/脚本
文档参考
以上代码使用的是支付插件功能，目前对应功能已升级JavaScript API GL，地址解析功能可直接调取接口使用，欢迎大家体验！
地址解析（地址转坐标)
JavaScript API GL参考手册
到此这篇关于详解某视频剪辑软件实现坐标拾取器功能示例的文章就介绍到这了，更多相关某视频剪辑软件坐标拾取器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。