前端vue百度地圖POI搜尋及經緯度回顯标記

安裝依賴

npm install vue-baidu-map --save
           

 然後在 main.js 中引入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

  // ak 是在百度地圖開發者平台申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */

  ak: 'YOUR_AK'

})

<template>
  <div>
    <baidu-map
      style="display:flex;flex-direction: column-reverse;"
      id="allmap"
      @ready="mapReady"
      @click="getLocation"
      :scroll-wheel-zoom="false"
    >
      <div style="display:flex;justify-content:center;width:100%;margin-bottom:8px;">
        <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}" style="width:98%;margin-right:2%;">
          <el-input v-model="searchJingwei" placeholder="輸入位址"></el-input>
        </bm-auto-complete>
        <el-button type="primary" @click="getBaiduMapPoint">搜尋</el-button>
      </div>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
        <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
        <p>緯度:{{this.latitude}}</p>
        <p>經度:{{this.longitude}}</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchJingwei:'',
      infoWindowShow:false,
      longitude:'',
      latitude:'',
      point:''
    }
  },
  methods: {
    //地圖初始化
    mapReady({ BMap, map }) {
      // 選擇一個經緯度作為中心點
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
      this.BMap=BMap
      this.map=map
    },
    //點選擷取經緯度
    getLocation(e){
      console.log(e);
      this.longitude=e.point.lng
      this.latitude=e.point.lat
      this.infoWindowShow=true
    },
    搜尋後點選定位标記
    getBaiduMapPoint(){
      let that=this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei,function(point){
        if(point){
          that.map.centerAndZoom(point,15)
          that.latitude=point.lat
          that.longitude=point.lng
          that.infoWindowShow=true
        }

      })
    },
    //資訊視窗關閉
    infoWindowClose(){
      this.latitude=''
      this.longitude=''
      this.infoWindowShow=false
    },
    //回顯
    setPoint(lat,lng){
      var p = new BMap.Point(lng, lat);
      this.latitude=lat
      this.longitude=lng
      this.infoWindowShow=true
      this.map.centerAndZoom(p,16)
    },
    //地圖初始化
    init(){
      var p = new BMap.Point(120.215512, 30.253083);
      this.latitude=""
      this.longitude=""
      this.searchJingwei=""
      this.infoWindowShow=false
      this.map.centerAndZoom(p,12)
    }
  }
}
</script>

<style scoped>
  #allmap{
    height: 450px;
    width: 100%;
    margin: 0;
  }
</style>
           

 這是回顯後效果：