vue中使用腾讯API地图，实现搜索关键词获取经纬度和地址并显示地图

最新推荐文章于 2025-04-22 10:55:56 发布

myjava_6

最新推荐文章于 2025-04-22 10:55:56 发布

阅读量4k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/myjava_6/article/details/126219504

版权

vue中使用腾讯API地图，实现搜索关键词获取经纬度和地址并显示地图

调用腾讯地图api前需要先去注册并申请key
在vue项目中的/public文件夹中的index.html的head中写入
安装lodash：npm install --save lodash
安装jsonp： npm install vue-jsonp --save
main.js引入jsonp

import Vue from 'vue'
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在public中的index.html文件中引入script标签加上链接

<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

具体代码功能如下：

// template中
<template>
  <div id="app">
    <div class="box">
      <div class="search-box">
        <input type="text" v-model="searchValue" class="search" @input="searchHandler">
        <ul class="" v-if="kwData.length != 0">
          <li v-for="(kw, i) in kwData" :key="i" @click="clickLiHandler(kw)">{{kw.title}}</li>
        </ul>
      </div>
      <h3>地址：{{address}}</h3>
      <div class="location">
        <h3>经度：{{lng}}</h3>
        <h3>纬度：{{lat}}</h3>
      </div>
      <br />
      <div id='mapContainer'></div>
    </div>
  </div>
</template>

// script
<script>
// import { debounce } from 'throttle-debounce'
// 安装lodash：npm install lodash --save     安装jsonp： npm install vue-jsonp --save
import lodash from 'lodash'
let that

export default ({
  data() {
    return {
      addValue: '',
      longitude: '',
      latitude: '',
      searchValue: '',
      kwData: '',
      clickLi: true,
      lng: '',
      lat: '',
      address: '',

      markerUrl: require("./assets/logo.png"),  // 点标记图片路径
      map: '',
      zoom: 4,  // 地图一开始的缩放级别
      center: new window.TMap.LatLng(39.984120, 116.307484),  // 地图一开始的中心点
      markerLayer: '',
      geometries: []
    }
  },
  created() {
    that = this
  },
  mounted() {
    this.init1()
  },
  methods: {
    init1() {
      var drawContainer = document.getElementById('mapContainer');
      // var center = new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标   lat: 23.228237   lng: 113.273747
      var center = new window.TMap.LatLng(23.228237, 113.273747);//设置中心点坐标   lat: 23.228237   lng: 113.273747
      this.map = new window.TMap.Map(drawContainer, {
        zoom: 9,
        pitch: 40,
        center: center,
        draggable: true,
        scrollable: true,
        mapStyleId: "style 1"
      });
      console.log('drawContainer', drawContainer)
      console.log(111, this.map)
      // 创建点聚合实例
      var markerCluster = new window.TMap.MarkerCluster({
        id: 'cluster',
        map: this.map,
        enableDefaultStyle: true, // 启用默认样式
        minimumClusterSize: 1, // 形成聚合簇的最小个数
        geometries: this.geometries,
        zoomOnClick: true, // 点击簇时放大至簇内点分离
        gridSize: 60, // 聚合算法的可聚合距离
        averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 10 // 采用聚合策略的最大缩放级别
      })
      markerCluster
    },

    // 添加点标记
    addPoint(point) { // 一个point需要有id和坐标
        this.markerLayer.add([
            {
                'id': point['id'],
                'styleId': 'mystyle',
                "position": new window.TMap.LatLng(point['latitude'], point['longitude']),
                "properties":{} // 自定义属性，可以没有
            }
        ])
    },

    addrToGetCoordinate(event) {
      console.log('event', event)
      console.log(event.target.value)
      let addr = event.target.value
      this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
        // key: 'ZBABZ-S5LKO-AQAWR-SNHUD-V3AQS-MSBMB',
        key: '6V3BZ-BZL6F-SAAJ6-JUS4K-ZCBNZ-6ZFGH',
        output: 'jsonp',
        address: addr
      })
    .then((res) => {
        console.log(res)
        if (res.status === 0) {
          // 处理得到的经纬度
          this.longitude = res.result.location.lng
          this.latitude = res.result.location.lat
          console.log('经度', this.longitude)
          console.log('纬度', this.latitude)

          // 用获取到的经纬度，修改地图的中心点
          // this.changeCenter(res.result.location.lat.toFixed(6), res.result.location.lng.toFixed(6))
        }
      })
      .catch((e) => {
          console.log(e)
        })
    },
    getKwd(event) {
      let kw = event.target.value
      console.log(111, kw)
      this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
        // key: 'ZBABZ-S5LKO-AQAWR-SNHUD-V3AQS-MSBMB',
        key: '6V3BZ-BZL6F-SAAJ6-JUS4K-ZCBNZ-6ZFGH',
        output: 'jsonp',
        keyword: kw,
        region: '广州市'
      })
        .then((res) => {
          console.log(res)
          if (res.status === 0) {
            console.log(res)
            this.kwData = res.data
            // 用获取到的经纬度，修改地图的中心点
            // this.changeCenter(res.result.location.lat.toFixed(6), res.result.location.lng.toFixed(6))
          } else {
            this.kwData = []
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    searchHandler: lodash.debounce((event) => {
      console.log(222, this)
      console.log('event', event)
      that.getKwd(event)
    }, 500),
    clickLiHandler(kwObj) {  // 点击搜索关键词项
      // this.clickLi = false
      this.searchValue = kwObj.title
      this.lng = kwObj.location.lng
      this.lat = kwObj.location.lat
      this.address = kwObj.address
      this.geometries = [
        { // 点数组
          position: new window.TMap.LatLng(this.lat, this.lng)
        }]
      this.init1()
      console.log(this.lat, this.lng)
      this.kwData = []
    }
  }
})
</script>


<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .search {
    margin-top: 20px;
  }

  .box {
    margin: 0 auto;
    width: 1080px;
    margin-top: 80px;

    input {
      outline: none;
      width: 300px;
      height: 30px;
      border: 1px solid #ccc;
      padding: 10px;
      background-color: white;
      box-sizing: border-box;

    }

    .search-box {
      position: relative;

      ul {
          // border: 1px solid #ccc;
          // box-shadow: 1px, 1px, 1px, 1px, #ccc;
          box-shadow: 0px 5px 15px rgba(165, 165, 165, 0.438);
          width: 300px;
          position: absolute;
          left: 389px;
          bottom: -293px;
          box-sizing: border-box;
          padding: 10px;
          font-size: 12px;
          z-index: 100;
          background-color: white;

          li {
            list-style: none;
            padding: 5px;
            text-align: left;
            
            &:hover {
              background-color: #7ad9ff;
              cursor: pointer;
            }
          }
        }
    }

    .location {
      display: flex;
      text-align: center;
      justify-content: center;

      h2 {
        width: 200px;

        &::nth-child(1) {
          margin-right: 20px;
        }
      }
    }

  }

  .map {
    width: 700px;
    height: 700px;
  }

  #mapContainer {
    width: 600px;
    height: 600px;
    margin: 0 auto;
  }

}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>