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使用腾讯地图(一)》

来源：简书

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

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

vue接入腾讯位置服务之标注定位实战
[vue接入腾讯位置服务之点击事件],请参考: https://blog.csdn.net/weixin_45653125/article/details/108466146 1.[标注] 添加标注 ...
vue接入腾讯位置服务(二)【标注定位实战】
vue接入腾讯位置服务(一)[点击事件]请参考:https://blog.csdn.net/weixin_45653970/article/details/108511378 1.[标注] 添加标注 ...
小程序定位，接入腾讯位置服务
接入腾讯位置服务官方文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 一.接入腾讯位置服务步骤公众号扫码注册,选择你要授权的小程序,到授权成功然后腾讯 ...
vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
vue 插件滑块验证_VUE接入腾讯验证码功能（滑块验证）备忘
最近在用VUE做个简单的用户系统,登录注册需要验证码,想找个那种拖动的,找geetest居然已经不面向小客户了(或者说只有收费套餐). 腾讯防水墙的验证码免费使用,有2000/小时的免费额度,对于小网 ...
vue 点击div 获取位置_Vue中组件之间8种通信方式，值得收藏
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么 ...
vue 动态设置div的高度_Vue 动态设置元素高度
1. Vue文件如下 let windowHeight = parseInt(window.innerHeight) export default { data() { return { window ...
vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例
实例如下所示: title #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } 添加数据编号名称时间 ...
vue怎么根据id获取组件_vue子组件，如何根据父组件传进来的id，去查询详情，并在子组件中显示？...
如果我在组件的created方法里面,根据id去后台查询详情,可以正常显示,不报错,但是当父组件id值改变后,并不会再次去后台查询了, ,假如我后台返回的对象时detail,如果写在computed里 ...

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

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

最新文章

热门文章