vue - 结合腾讯地图时绑定监听要使用箭头函数不然无法绑定

 
//错误的绑定 
qq.maps.event.addDomListener(map, 'click', function (event) {
     addMarker(event.latLng);
 });
  
  //正确绑定
  methods: {
            initTXMap() {
                //步骤:定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                //设置地图中心点
                var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude);
                //定义工厂模式函数
                var myOptions = {
                    zoom: 13,               //设置地图缩放级别
                    center: myLatlng,      //设置中心点样式
                    mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
                }
                //获取dom元素添加地图信息
                this.map = new qq.maps.Map(document.getElementById("container"), myOptions);
                //给地图添加点击事件
                //并获取鼠标点击的经纬度
                qq.maps.event.addListener(this.map, 'click', (event) => {
                    this.longitude = event.latLng.getLat();
                    this.latitude = event.latLng.getLng();
                    alert("经度:"+this.longitude+","+"纬度:"+this.latitude);
                    this.addMarker(event.latLng);
                });
            },
            addMarker(location){
                var marker = new qq.maps.Marker({
                    position: location,
                    map: this.map
                });
                this.markersArray.push(marker);
            }
  }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值