关于腾讯地图:vue接入腾讯地图一点击事件

1、【调用展现】

在 https://lbs.qq.com/guides/startup.html 申请一个 key

// 先在 vue 的 index.html 外面引入腾讯地图包
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//.vue
<template>
    <div>
        <div id="container" style="width:600px;height:500px;"></div>
    </div>
</template>

<script>
    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);
            }
        }
    }
</script>

效果图

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

• 增加点击事件 qq.maps.event.addListener(map, 'click', function(event) {alert("你点击了地图"); });
• 点击事件中获取经度 this.longitude = event.latLng.getLat();
• 点击事件中获取纬度 this.latitude = event.latLng.getLng();

残缺案例

// 先在 vue 的 index.html 外面引入腾讯地图包
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//.vue
<template>
    <div>
        <div id="container" style="width:600px;height:500px;"></div>
    </div>
</template>

<script>
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();
        }
    }
</script>

效果图

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

链接：https://www.jianshu.com/p/130…

起源：简书

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。