vue接入騰訊位置服務之點選事件

阿新 • • 發佈：2020-09-08

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>