vue接入騰訊地圖之標註&定位實戰

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

【vue接入騰訊地圖之點選事件】，請參考：https://www.cnblogs.com/Dreamholder/p/13626081.html

1、【標註】

新增標註

var marker = new qq.maps.Marker({
    position: myLatlng ,
    map: map
});

文字標註

var marker = new qq.maps.Label({
    position: myLatlng,
    map: map,
    content:'文字標註'
});

效果

自定義標註圖示

    var anchor = new qq.maps.Point(300, 0),
          size = new qq.maps.Size(600, 680),
          origin = new qq.maps.Point(-150, 0),
          markerIcon = new qq.maps.MarkerImage(
      "/static/images/position.png",
      size, 
      origin,
      anchor
    );
    marker.setIcon(markerIcon);

預覽

定位logo

官網預覽https://lbs.qq.com/javascript_v2/case-run.html#sample-overlay-addmarkerimage

為什麼會有這麼大區別呢，因為這是圖片的問題一個大一個小，還需要稍加調整，展示官網定點陣圖片

2、【定位實戰→qq.maps.Geolocation】

引入js包（注意：vue專案得在首頁的index.html裡面引入）

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//這個是固定的用這個連結就可以
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

三步走

<template>
    <div id="container" style="width:600px;height:500px;"></div>
</template>

<script>
    export default{
        name:'news',
        data() {
            return {
                longitude:0,//經度
                latitude:0,//緯度
                city:''
            }
        },
        methods:{
  //第一部分
              //定位獲得當前位置資訊
            getMyLocation() {
                var geolocation = new qq.maps.Geolocation("yourkey", "yourkey名稱");
                geolocation.getIpLocation(this.showPosition, this.showErr);
                //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精確度比較高
            },
            showPosition(position) {
                console.log(position);
                this.latitude = position.lat;
                this.longitude = position.lng;
                this.city = position.city;
                this.setMap();
            },
            showErr() {
                console.log("定位失敗");
                this.getMyLocation();//定位失敗再請求定位，測試使用
            },
//第二部分
        //位置資訊在地圖上展示
            setMap() {
                //步驟：定義map變數 呼叫 qq.maps.Map() 建構函式   獲取地圖顯示容器
                //設定地圖中心點
                var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
                //定義工廠模式函式
                var myOptions = {
                  zoom: 13,               //設定地圖縮放級別
                  center: myLatlng,    //設定中心點樣式
                  mapTypeId: qq.maps.MapTypeId.ROADMAP  //設定地圖樣式詳情參見MapType
                }
                // //獲取dom元素新增地圖資訊
                var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//第三部分
              //給定位的位置新增圖片標註
                var marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                //給定位的位置新增文字標註
                var marker = new qq.maps.Label({
                    position: myLatlng,
                    map: map,
                    content:'這是我當前的位置，偏差有點大，哈哈'
                });
            }
          },
        mounted() {
            this.getMyLocation();
            }
        }
</script>

開發者用的時候可以一步一步去實現，保證每一步都實現後再進行下一步

申請key地址

https://lbs.qq.com/console/mykey.html

官方文件

https://lbs.qq.com/tool/component-geolocation.html
https://lbs.qq.com/javascript_v2/guide-start.html