vue 点击div 获取位置_vue接入腾讯位置服务之点击事件

1、【调用展示】

//先在vue的index.html里面引入腾讯地图包

//.vue

export default{

mounted() {

this.init();

},

methods:{

init() {

//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器

//设置地图中心点

var myLatlng = new qq.maps.LatLng(39.916527,116.397128);

//定义工厂模式函数

var myOptions = {

zoom: 8, //设置地图缩放级别

center: myLatlng, //设置中心点样式

mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType

}

//获取dom元素添加地图信息

var map = new qq.maps.Map(document.getElementById("container"), myOptions);

}

}

}

效果图

2、【地图中添加点击事件】

添加点击事件 qq.maps.event.addListener(map, 'click', function(event) { alert("你点击了地图"); });

点击事件中获取经度this.longitude = event.latLng.getLat();

点击事件中获取纬度this.latitude = event.latLng.getLng();

完整案例

//先在vue的index.html里面引入腾讯地图包

//.vue

export default{

name:'news',

data() {

return {

longitude:39.916527,//经度

latitude:116.397128//纬度

}

},

methods:{

init() {

//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器

//设置地图中心点

var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude);

//定义工厂模式函数

var myOptions = {

zoom: 8, //设置地图缩放级别

center: myLatlng, //设置中心点样式

mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType

}

//获取dom元素添加地图信息

var map = new qq.maps.Map(document.getElementById("container"), myOptions);

//给地图添加点击事件

//并获取鼠标点击的经纬度

qq.maps.event.addListener(map, 'click', function(event) {

this.longitude = event.latLng.getLat();

this.latitude = event.latLng.getLng();

alert("经度:"+this.longitude+","+"纬度:"+this.latitude);

});

}

},

mounted() {

this.init();

}

}

效果图

以上内容转载自前端来入坑的文章《vue使用腾讯地图(一)》

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。