vue 使用腾讯地图获取坐标，亲测有效

1.先获取腾讯地图的key:https://lbs.qq.com/

2.

//先在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>

 2.不在入口文件(index.html）引入js,直接在初始化放入腾讯地图key(选一即可)

      //初始化地图
            init() {
              var that = this;
              maps.init("H7FBZ-WSYL6-PCQS4-ENVPQ-75MV5-2HBM3", () => {
                var myLatlng = new qq.maps.LatLng(22.547931568083015, 114.1306221485138);
                var myOptions = {
                  zoom: 16,
                  center: myLatlng,
                  mapTypeId: qq.maps.MapTypeId.ROADMAP
                };
                that.map = new qq.maps.Map(
                  document.getElementById("container"),
                  myOptions
                );
                //获取点击后的地址
                qq.maps.event.addListener(that.map, "click", function (event) {
                  // 获取点击后的地图坐标
                  that.form.lng = String(event.latLng.getLng().toFixed(6));
                  that.form.lat = String(event.latLng.getLat().toFixed(6));
                });
              });

            },

 

效果如图：