vue3和百度地圖關鍵字檢索 定位 點選定位

喬木滴滴發表於2023-01-29
Vue地圖

效果圖

在index.html中引入

百度地圖開放平臺  去申請你的ak 非常的簡單可以自己百度 一下

  <!-- 這個用官網給的有好多警告 更具百度的把 https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxx 換為這個就沒有那麼多 報錯了 -->
  <script
    type="text/javascript"
    src="https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" // 這個替換為你自己申請的ak 
  ></script>

 建立一個元件

<template>
  <div style="width: 100%; height: 440px;">
    <!-- 顯示小地址小框框 -->
    <div class="ipt">
      <div class="address">
        {{ address }}
      </div>
      <!-- 支援模糊查詢 -->
      <input type="text" id="suggestId" placeholder="搜尋地名" />
    </div>
    <!-- 地圖 -->
    <div id="map" :style="{ width: '100%', height: 400 + 'px' }">
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps, ref, defineEmits } from 'vue'
// 傳入的中心點 重新整理頁面載入的點
const props = defineProps({
  latitude: {
    type: String,
    default: () => {
      return '40.083402'
    },
  },
  longitude: {
    type: String,
    default: () => {
      return '113.368374'
    },
  }
})
// 傳出地址
const emits = defineEmits(['addressData'])
// 顯示地址
const address = ref('')
// 引入的地圖的api
const BMap = (window as any).BMap
onMounted(() => {
  // 建立地圖例項
  var map = new BMap.Map('map')
  // 這個建立地理服務的 下面是把定位轉換為詳細文字地址 
  var geoc = new BMap.Geocoder();
  //建立一個自動完成的物件 主要關鍵字查詢
  var ac = new BMap.Autocomplete(
    {
      // suggestId 是輸入框id 
      "input": "suggestId"
      //  這個是地圖例項
      , "location": map
    });
  // 下拉選單裡的內容確認發生的事件 ()
  ac.addEventListener('onconfirm', function (e: any) {
    // 把城市啥的拼接起來
    const myValue =
      e.item.value.province +
      e.item.value.city +
      e.item.value.district +
      e.item.value.street +
      e.item.value.business
    // 搜尋
    // 搜尋結束執行的函式
    const mySearchFun = () => {
      // 傳入定位函式的經緯度 
      getAddOverlay(local.getResults().getPoi(0).point)
      // 定位中心點 
      map.centerAndZoom(local.getResults().getPoi(0).point, 15)
    }
    // 建立一個搜尋的例項
    var local = new BMap.LocalSearch(map, {
      //搜尋成功後的回撥 
      onSearchComplete: mySearchFun,
    })
    // 傳入搜尋位置的關鍵字
    local.search(myValue)
  })

  // 下面是開始定位的
  var point = new BMap.Point(props.longitude, props.latitude) // 定位
  getAddOverlay(point)
  map.centerAndZoom(point, 5) // 中心點位 15是級別
  map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
  // 當地圖點選的時候發生的事件 
  map.addEventListener('click', function (e: any) {
    // 建立標點
    getAddOverlay(new BMap.Point(e.point.lng, e.point.lat))
  })
  // 定位點的函式  
  function getAddOverlay(point: any) {
    // 清空地圖上所有的標準當然你想要多個點的話可以不清除
    map.clearOverlays()
    var marker = new BMap.Marker(point);        // 建立標註    
    map.addOverlay(marker); // 新增到地圖
    // 把定位轉換為詳細文字地址  
    geoc.getLocation(point, (rs: any) => {
      // 顯示到頁面上
      address.value = rs.address
    })
    // 把位置傳出
    emits('addressData', point)
  }
})

</script>


<style lang="scss" >
.anchorBL {
  display: none;
}
</style>
<style lang="scss"  scoped>
.ipt {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 300px;
  height: 25px;
  margin-bottom: 10px;

  #suggestId {
    width: 40%;
    min-width: 250px;
    padding: 5px 10px;
    outline: none;
    font-size: 13px;
    font-family: monospace;
    color: #606266;
    border-radius: 4px;
    border: 1px solid #ddd;
  }

  .address {
    position: absolute;
    width: 300px;
    height: 20px;
    font-size: 12px;
    left: 0;
    bottom: 0;
  }
}
</style>

 

在父元件引入

  <center-map @addressData="addressData" :latitude="latitude" :longitude="longitude"></center-map>

　　

相關文章