VUE 项目接入腾讯地图，根据经纬度显示地图位置，点击地图获取经纬度申请腾讯地图key 申请地址： https://l

申请腾讯地图key 申请地址： lbs.qq.com/dev/console…
引入js idnex.html

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>

官方文档地址

项目中应用

index.vue

<div id="qqMap"></div>

index.css

#qqMap{
    width: 100%;
    height: 400px;
}

model.js

let Model = {
    data() {
        return {
            Model: {
              tencentLongitude:116.404
              tencentLatitude:39.915
            }
        }
    }
}

controll.js

let Controller = {
    methods:{
        init(){
            this.QQMapInit();
        },
        //点击地图获取经纬度
        QQMapInit() {
            let _that = this
            //步骤：定义map变量 调用 qq.maps.Map() 构造函数获取地图显示容器
            //设置地图中心点
            var myLatlng = new qq.maps.LatLng(this.Model.tencentLatitude, this.Model.tencentLongitude);
            //定义工厂模式函数
            var myOptions = {
                zoom: 18,               //设置地图缩放级别
                center: myLatlng,      //设置中心点样式
                mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
            }
            //获取dom元素添加地图信息
            var map = new qq.maps.Map(document.getElementById("qqMap"), myOptions);
            var marker = new qq.maps.Marker({
                position: myLatlng,
                map: map
            });
            qq.maps.event.addListener(map, 'click', function (event) {
                marker.setPosition(event.latLng)
                console.log("经度:" + event.latLng.getLat() + "," + "纬度:" + event.latLng.getLng());
                let lat = event.latLng.getLat()
                let lng = event.latLng.getLng()
                _that.Model.tencentLatitude = lat
                _that.Model.tencentLongitude = lng
            })
        }
    }
}

效果预览