Vue中集成高德地圖API實現定位與自定義樣式信息窗體

場景

若依前后端分離版手把手教你本地搭建環境並運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面將前后端項目搭建起來后，要集成高德地圖實現地圖顯示與定位功能的實現。

 

 

然后在地圖的基礎上實現根據坐標進行定位並自定義信息窗體，實現效果如下

 

 

然后關掉窗體還可以實現定位標記的圖片

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

登錄高德開放平台，然后新建應用

https://developer.amap.com/

 

 

然后

 

 

然后為新建的應用新建key,這里的服務平台選擇Web端，然后提交

 

 

然后就可以獲取到Key，下面代碼中會用到這個Key

然后在Vue項目中安裝高德地圖Amap相關依賴

npm install vue-amap

 

 

然后在main.js中引入，將上面的key填入

//引入高德地圖
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '你自己的高德地圖的key',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
  v: '1.4.4',
  uiVersion: '1.0'
})

添加位置

 

 

然后編寫地圖組件AMap.vue

<template lang="html">
 <div style="width:100%;height:800px;">
    <div class="container">
      <div class="search-box">
        <input
          v-model="searchKey"
          type="search"
          id="search">
        <button @click="searchByHand">搜索</button> 
        <div class="tip-box" id="searchTip"></div>
       <button @click="positionByHand">定位</button> 
      </div>

      <!--
        amap-manager： 地圖管理對象
        vid：地圖容器節點的ID
        zooms： 地圖顯示的縮放級別范圍，在PC上，默認范圍[3,18]，取值范圍[3-18]；在移動設備上，默認范圍[3-19]，取值范圍[3-19]
        center： 地圖中心點坐標值
        plugin：地圖使用的插件
        events： 事件
      -->

      <el-amap class="amap-box"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
        <!-- 標記 -->
        <el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events"></el-amap-marker>
        <el-amap-info-window
            :position="currentWindow.position"
            :content="currentWindow.content"
            :visible="currentWindow.visible"
            :events="currentWindow.events">
        </el-amap-info-window>
      </el-amap>
    </div>
 </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
let amapManager = new AMapManager()
export default {
  name:'AMap',
  data() {
    let self = this
    return {
      carmarkers :[],
      currentWindow: {
        position: [116.396624,39.908167],
        content: '111',
        events: {},
        visible: false
      },
      address: null,
      searchKey: '',
      amapManager,
      markers: [],
      searchOption: {
        city: '全國',
        citylimit: true
      },
      center: [116.396624,39.908167],
      zoom: 17,
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initSearch()
          })
        },
        // 點擊獲取地址的數據
        click(e) {
          self.markers = []
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          self.center = [lng, lat]
          self.markers.push([lng, lat])
          // 這里通過高德 SDK 完成。
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          console.log(lng+","+lat) //控制台打印坐標
          
          geocoder.getAddress([lng, lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                console.log(result.regeocode.formattedAddress) //控制台打印地址
                self.address = result.regeocode.formattedAddress
                self.searchKey = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
        }
      },
      // 一些工具插件
      plugin: [
        {
          pName: 'Geocoder',
          events: {
            init (o) {
              //console.log("一些工具插件--地址"+o.getAddress())
            }
          }
        },
        {
          // 定位
          pName: 'Geolocation',
          events: {
            init(o) {
              // o是高德地圖定位插件實例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 設置經度
                  self.lng = result.position.lng
                  // 設置維度
                  self.lat = result.position.lat
                  // 設置坐標
                  self.center = [self.lng, self.lat]
                  self.markers.push([self.lng, self.lat])
                  // load
                  self.loaded = true
                  // 頁面渲染好后
                  self.$nextTick()
                }
              })
            }
          }
        },
        {
          // 工具欄
          pName: 'ToolBar',
          events: {
            init(instance) {
               //console.log("工具欄:"+instance);
            }
          }
        },
        {
          // 鷹眼
          pName: 'OverView',
          events: {
            init(instance) {
               //console.log("鷹眼:"+instance);
            }
          }
        },
        {
          // 地圖類型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
               //console.log("地圖類型:"+instance);
            }
          }
        },
        {
          // 搜索
          pName: 'PlaceSearch',
          events: {
            init(instance) {
               //console.log("搜索:"+instance)
            }
          }
        }
      ]
    }
  },
  methods: {
    initSearch() {
      let vm = this
      let map = this.amapManager.getMap()
      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          input: 'search',
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: 'searchTip',
          searchResultsContainer: 'searchTip'
        })
        vm.poiPicker = poiPicker
        // 監聽poi選中信息
        poiPicker.on('poiPicked', function(poiResult) {
          // console.log(poiResult)
           let source = poiResult.source
           let poi = poiResult.item
           if (source !== 'search') {
             poiPicker.searchByKeyword(poi.name)
           } else {
             poiPicker.clearSearchResults()
             vm.markers = []
             let lng = poi.location.lng
             let lat = poi.location.lat
             let address = poi.cityname + poi.adname + poi.name
             vm.center = [lng, lat]
             vm.markers.push([lng, lat])
             vm.lng = lng
             vm.lat = lat
             vm.address = address
             vm.searchKey = address
           }
        })
      })
    },
    searchByHand() {
      if (this.searchKey !== '') {
        this.poiPicker.searchByKeyword(this.searchKey)
      }
    },
    positionByHand() {
            this.currentWindow = {
              position: [121.492439,31.233264],
              content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿</div>`,
              events: {
                close: (e) => {
                  this.currentWindow.visible = false
                }
              },
              visible: true }
            this.carmarkers = [
              {
                position:[121.492439,31.233264],
                content: `<div><img  width=50 height=50 src="https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg" alt="汽車"></div>`,
                events: {
                  click: (e) => {
                    this.currentWindow = {
                      position: this.center,
                      content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿 </div>`,
                      events: {
                        close: (e) => {
                          this.currentWindow.visible = false
                        }
                      },
                      visible: true }
                  }
                }
              }
            ]
    }
  }
}
</script>

<style lang="css">
.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 30%;
  left: 13%;
  top: 10px;
  height: 30px;
}
.search-box input {
  float: left;
  width: 80%;
  height: 100%;
  border: 1px solid #30ccc1;
  padding: 0 8px;
  outline: none;
}
.search-box button {
  float: left;
  width: 20%;
  height: 100%;
  background: #30ccc1;
  border: 1px solid #30ccc1;
  color: #fff;
  outline: none;
}
.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>

 

組件的位置

 

 

然后找到需要顯示地圖組件的頁面，這里是首頁，將沒有用的內容刪掉，然后

import AMap from '@/components/Amap/AMap'
export default {
  name: "index",
   components: {
      AMap
  },

 

引入組件，然后在需要顯示地圖的地方

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <AMap></AMap>
    </el-row>
    <el-divider />
  </div>
</template>

 

這樣就能看實現上面需求的功能了

注意其他功能的開發可以參考官方開發文檔

在地圖上點自定義標記，通過

<el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events"></el-amap-marker>

 

標簽來實現

然后自定義窗體通過

        <el-amap-info-window
            :position="currentWindow.position"
            :content="currentWindow.content"
            :visible="currentWindow.visible"
            :events="currentWindow.events">
        </el-amap-info-window>

 

然后在定位按鈕的點擊事件中

    positionByHand() {
            this.currentWindow = {
              position: [121.492439,31.233264],
              content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿</div>`,
              events: {
                close: (e) => {
                  this.currentWindow.visible = false
                }
              },
              visible: true }
            this.carmarkers = [
              {
                position:[121.492439,31.233264],
                content: `<div><img  width=50 height=50 src="https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg" alt="汽車"></div>`,
                events: {
                  click: (e) => {
                    this.currentWindow = {
                      position: this.center,
                      content: `<div style="color: #1c84c6;">公眾號:霸道的程序猿 </div>`,
                      events: {
                        close: (e) => {
                          this.currentWindow.visible = false
                        }
                      },
                      visible: true }
                  }
                }
              }
            ]
    }

 

首先設置自定義窗體的坐標和位置以及要顯示的窗體的內容，然后再設置點標記的圖片覆蓋，並且設置這個點標記圖片的點擊事件也是顯示上面的自定義信息窗體。