vue接入騰訊地圖(一)【點擊事件】

一、【調用展現】

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

效果圖

二、【地圖中添加點擊事件】

• 添加點擊事件 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...

來源：簡書

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。