vue使用百度地圖API查詢地點信息和位置展示

使用百度地圖查詢地址

首先申請一個 ak，詳情點擊這里

之后根據官方文檔我們調用如下接口

https://api.map.baidu.com/place/v2/search?query=中南大學湘雅醫院&region=全國&output=json&ak=您的ak //GET請求

調用成功后返回的數據如下

{
    "status":0,
    "message":"ok",
    "result_type":"poi_type",
    "results":[
        {
            "name":"中南大學湘雅醫院",
            "location":{
                "lat":28.217917,
                "lng":112.991041
            },
            "address":"長沙市開福區湘雅路87號",
            "province":"湖南省",
            "city":"長沙市",
            "area":"開福區",
            "street_id":"a5ef680f314baaceb8df8fb0",
            "telephone":"[phone]",
            "detail":1,
            "uid":"a5ef680f314baaceb8df8fb0"
        },
    ]
}

我們還可以根據經緯度來獲取在地圖上顯示出來，這里引入第三方插件 vue-baidu-map

$ npm install vue-baidu-map --save

然后在 main.js 中全局注冊

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發者平台申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

然后封裝一個展示地圖組件

• center 設置中心經緯度
• zoom 設置縮放等級
• scroll-wheel-zoom 設置鼠標可縮放地圖

<template>
  <baidu-map
    class="map"
    :center="{ lng: lng, lat: lat }"
    :zoom="15"
    :scroll-wheel-zoom="true"
  >
    <bm-marker
      :position="{ lng: lng, lat: lat }"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
    >
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      lng: 116.404,
      lat: 39.915,
    }
  },
  methods: {
    setLoacl(lng, lat) {
      this.lng = lng
      this.lat = lat
    },
  },
}
</script>

<style>
.map {
  margin-top: 20px;
  width: 100%;
  height: 300px;
}
</style>

在頁面中使用封裝好的組件，只需要調用組件中的 setLoacl 方法，傳入經緯度即可展示該位置信息

<div>
	<Map ref="map"></Map>
</div>

<script>
import Map from './component/Map.vue'
export default {
  components: {
    Map,
  },
  methods: {
    lookMap(row) {
      this.$refs.map.setLoacl(row.location.lng, row.location.lat)
    },
  },
}
</script>

示例