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...

起源：简书

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