Vue 騰訊地圖 前端定位組件 實現地圖定位

參考網址：

https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

https://blog.csdn.net/l13620804253/article/details/117259244

https://www.jianshu.com/p/d331f3449a78

 

1、騰訊位置服務申請密鑰

2、vue項目index.html引入

<script src="https://map.qq.com/api/gljs?v=1.exp&key=申請的密鑰"></script>

3、引入jsonp

1）安裝vue-jsonp：

cnpm install vue-jsonp --save

2）在main.js中導入

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

4、封裝組件

<template>
  <div class="Map">
    <div class="search_Map">
      <input type="text" v-model="value" @input="search(value)" />
      <div class="content">
        <p v-for="(i, index) in addressList" :key="index" @click="select(i)">
          {{ i.title }}
          <span class="address">{{ i.address }}</span>
        </p>
      </div>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
// https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation
export default {
  name: "TXMap", //騰訊地圖
  props: {
    latitude: {
      type: [Number, String],
      required: true,
      default: "",
    },
    longitude: {
      type: [Number, String],
      required: true,
      default: "",
    },
  },
  data() {
    return {
      value: "", //搜索內容
      addressList: [], //搜索結果
      selectValue: {}, //選擇的某個結果
      timeout: null, //搜索定時器
      map: null,
      marker: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    //初始化地圖
    initMap() {
      var center = new TMap.LatLng(this.latitude, this.longitude);
      //初始化地圖
      this.map = new TMap.Map("container", {
        rotation: 20, //設置地圖旋轉角度
        pitch: 0, //設置俯仰角度（0~45）
        zoom: 16, //設置地圖縮放級別
        center: center, //設置地圖中心點坐標
      });
    },
    //地址搜索
    search(value) {
      this.addressList = [];
      clearTimeout(this.timeout);
      if (value) {
        let that = this;
        this.timeout = setTimeout(() => {
          that
            .$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion/", {
              key: "申請的密鑰",
              output: "jsonp",
              keyword: value,
            })
            .then((res) => {
              console.log(res);
              if (res.status === 0 && res.data) {
                that.addressList = res.data;
              }
            })
            .catch((e) => {
              console.log(e);
            });
        }, 500);
      }
    },
    //選擇對應搜索地址
    select(row) {
      console.log(">>>select:", row);
      this.$emit("addressInfo", row);
      this.selectValue = row.location;
      this.addressList = [];
      let self = this;

      //更新地圖中心位置
      self.map.setCenter(
        new TMap.LatLng(this.selectValue.lat, this.selectValue.lng)
      );

      //判斷是否存在標記點，有的話清空
      if (self.marker) {
        self.marker.setMap(null);
        self.marker = null;
      }

      //初始化marker
      self.marker = new TMap.MultiMarker({
        id: "marker-layer", //圖層id
        map: self.map,
        styles: {
          //點標注的相關樣式
          marker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
          }),
        },
        geometries: [
          {
            //點標注數據數組
            id: "demo",
            styleId: "marker",
            position: new TMap.LatLng(
              self.selectValue.lat,
              self.selectValue.lng
            ),
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Map {
  position: relative;
  margin-bottom: 10px;
  .search_Map {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 99009;
    input {
      border: 1px solid #f1f1f1;
      display: inline-block;
      width: 400px;
      height: 40px;
      padding: 10px;
      color: #5a5a5a;
      background: rgba(255, 255, 255, 0.904);
    }
    .content {
      width: 400px;
      background: rgba(252, 250, 250, 0.918);
      border: 1px solid #f1f1f1;
      border-top: none;
      font-size: 13px;
      color: #5a5a5a;
      max-height: 350px;
      overflow-y: auto;
      p {
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 380px;
        border-bottom: 1px solid #f1f1f1;
        padding: 15px 10px;
        margin: 0;
        cursor: pointer;
        &:hover {
          background: #eff6fd;
        }
        .address {
          font-size: 12px;
          color: #b9b9b9;
          margin-left: 20px;
        }
      }
    }
  }
}
#container {
  min-width: 800px;
  width: 100%;
  height: 400px;
}
</style>

4、使用

    <TXMap
      :latitude="latitude"
      :longitude="longitude"
      @addressInfo="addressInfo"
    />


import TXMap from "@/components/TXMap";