首先需要在index.html中引入高德地圖的js鏈接，key需要換成你自己的key

最近有個需求是實現一個使用地圖搜索定位的功能，在網上參考了下其他的文章，感覺不是很完善，自己整理了一下，可以實現點擊定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看著改下

<script type='text/javascript' src='https://webapi.amap.com/maps?v=1.4.14&key=你的key'></script>

效果圖如下

下邊就是實現過程

html部分

<template> <div id='wrap'> <div id='searchWrap'> <div class='searchWrap'><input type='text' v-model='address' @input='search'><button @click='search'>搜索</button> </div> <div v-show='hide'><div v-for='(item,index) in poiArr' @click='openMarkerTipById(index,$event)' @mouseout='onmouseout_MarkerStyle(index+1,$event)' :key='index'> <div style='border-bottom: 1px solid #eaeaea'> <div :class='index==selectedIndex?’selected’:’’'>{{index+1}}</div> <div v-if='item.url' : ></div> <h3 > <span class='poi-name'>{{item.name}}</span> </h3> <div class='poi-info'> <p class='poi-addr'>地址：{{item.address}}</p> <p class='poi-tel'>電話：{{item.tel}}</p> </div> <div class='clear'></div> </div></div> </div> </div> <div id='iCenter'></div> <button @click='fetAddressName'>獲取當前位置和名字</button> </div></template>

js部分

<script> export default { props:[’newAddress’,’dataObj’],// 父組件傳過來的地址和地址經緯度信息， data() { return { address:this.newAddress ? this.newAddress : ’鄭州’,//保存地址的漢字名字 map1: ’’, map:’’,//保存地址的經緯度 poiArr: [],//左邊搜索出來的數組 windowsArr: [],//信息窗口的數組 marker: [], mapObj: '',//地圖對象 selectedIndex: -1, hide: false, clickType: 1, location:{ P:this.dataObj.lat, Q:this.dataObj.lng, } }; }, mounted() { console.log(333,this.dataObj,this.location) this.mapInit() this.placeSearch(this.address) }, methods: { showToast(address){ this.placeSearch(address.address) console.log(444,address) this.location.P =address.lat this.location.Q =address.lng this.address = address.address let that = this; new AMap.InfoWindow({ content:'<h3>' + ’當前選中地址’ + '</h3>' + that.address, size: new AMap.Size(300, 0), autoMove: true, offset: new AMap.Pixel(-4, -10) }).open(that.mapObj,that.location) }, cancelSave(){ eventBus.$emit(’cancelSave’) }, saveAddress(){ let addressName,location; if(this.clickType==1){ let address = this.poiArr[this.selectedIndex] addressName = address.name+address.address; location = address.location console.log(address.name+address.address,address.location) }else if(this.clickType==2){ console.log(this.address,this.map) addressName = this.address; location = this.map; }else if(this.clickType==3){ console.log(this.address,this.map1) addressName = this.address; location = this.map1; } eventBus.$emit(’saveAddress’,[addressName,location]) }, // 經緯度轉化為詳細地址 getAddress(){ let that = this; AMap.plugin(’AMap.Geocoder’,function(){ let geocoder = new AMap.Geocoder({ radius: 100, extensions: 'all' }); geocoder.getAddress([that.map1.lng,that.map1.lat], function(status, result) { if (status === ’complete’ && result.info === ’OK’) { let address = result.regeocode.formattedAddress; console.log(result.regeocode); that.address = result.regeocode.formattedAddress; // that.placeSearch(that.address) } }); }) }, // 地圖點擊事件 testevent(){ let that = this; this.clickType = 3 // var map=new AMap.Map(’iCenter’);//重新new出一個對象，傳入參數是div的id AMap.event.addListener(this.mapObj,’click’,function (e) { //添加點擊事件,傳入對象名，事件名，回調函數 that.map1 = e.lnglat; that.getAddress(); setTimeout(()=>{ new AMap.InfoWindow({ content:'<h3>' + ’當前選中地址’ + '</h3>' + that.address, size: new AMap.Size(300, 0), autoMove: true, offset: new AMap.Pixel(-4, -10) }).open(that.mapObj,e.lnglat) },100) }) }, //創建一個map mapInit() { this.mapObj = new AMap.Map('iCenter', { resizeEnable: true, zoom: 10, }) this.testevent(); }, //根據名字地址去搜索結果 placeSearch(name) { let that = this; this.hide = true var MSearch; this.mapObj.plugin( ['AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Scale'], () => { this.mapObj.addControl(new AMap.ToolBar()) this.mapObj.addControl(new AMap.Scale()) MSearch = new AMap.PlaceSearch({ //構造地點查詢類 city: that.address //城市 }); AMap.event.addListener(MSearch,'complete',this.keywordSearch_CallBack) //返回地點查詢結果 MSearch.search(name); //關鍵字查詢 } ); }, //結果的回調 keywordSearch_CallBack(data) { console.log(111,data) var poiArr = data.poiList.pois var resultCount = poiArr.length this.poiArr = poiArr; //左邊要渲染的數據 for (var i = 0; i < resultCount; i++) { this.addmarker(i, poiArr[i]) console.log(poiArr[i]) this.poiArr[i].url = this.poiArr[i].photos? this.poiArr[i].photos[0]? this.poiArr[i].photos[0].url: '': '' } this.mapObj.setFitView() }, //添加marker&infowindow addmarker(i, d) { var lngX = d.location.getLng(); var latY = d.location.getLat(); console.log(lngX,latY) var markerOption = { map: this.mapObj, position: new AMap.LngLat(lngX, latY) }; var mar = new AMap.Marker(markerOption); this.marker.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({ content: '<h3>' +’當前選中位置：’+ d.name + '</h3>' + this.TipContents(d.name, d.address), size: new AMap.Size(300, 0), autoMove: true, offset: new AMap.Pixel(0, -30) }); console.log() this.windowsArr.push(infoWindow); var _this = this; var aa = (e) => { this.clickType = 2 var obj = mar.getPosition(); this.map = obj //這里保存的地址經緯度 this.address = d.name + d.address //這里保存的是地址名字 infoWindow.open(_this.mapObj, obj); } AMap.event.addListener(mar, 'click', aa) }, TipContents(name, address) { //窗體內容 if ( name == '' || name == 'undefined' || name == null || name == ' undefined' || typeof name == 'undefined' ) { type = '暫無'; } if ( address == '' || address == 'undefined' || address == null || address == ' undefined' || typeof address == 'undefined' ) { address = '暫無'; } var str = `地址：${address}` return str }, openMarkerTipById(pointid, event) { //根據id 打開搜索結果點tip this.clickType = 1 event.currentTarget.style.background = '#CAE1FF'; this.selectedIndex = pointid // this.map = this.marker[pointid] this.map1 = this.poiArr[pointid].location console.log(222,this.mapObj, this.marker[pointid]) console.log(this.marker[pointid],this.poiArr[pointid]) this.address = this.poiArr[pointid].address + this.poiArr[pointid].name this.windowsArr[pointid].open(this.mapObj, this.marker[pointid]) }, onmouseout_MarkerStyle(pointid, event) { //鼠標移開后點樣式恢復 event.currentTarget.style.background = '' }, search() { this.windowsArr = [] this.marker = [] this.mapObj=’’ this.mapInit() this.placeSearch(this.address) } }, };</script>

css部分

<style lang='scss'> #wrap{ width:100%; display: flex; #iCenter { height: 600px; position: relative; display: flex; flex: 1; } #searchWrap{ width:300px; position: relative; height:600px; .searchWrap{position: absolute;width:300px;z-index: 9;display: flex;align-items: center;input{ width:260px; height:24px;}button{ width:36px; height:28px;} } #result {width: 300px;position: absolute;top:30px;height: 570px;z-index: 8;overflow-y: scroll;border-right: 1px solid #ccc; } } .amap_lib_placeSearch { height: 100%; overflow-y: scroll; .poibox {border-bottom: 1px solid #eaeaea;cursor: pointer;padding: 5px 0 5px 10px;position: relative;min-height: 35px;.selected { background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;}&:hover { background: #f6f6f6;}.poi-img { float: right; margin: 3px 8px 0; width: 90px; height: 56px; overflow: hidden;}.poi-title { margin-left: 25px; font-size: 13px; overflow: hidden;}.poi-info { word-break: break-all; margin: 0 0 0 25px; overflow: hidden; p { color: #999; font-family: Tahoma; line-height: 20px; font-size: 12px; }}.poibox-icon { margin-left: 7px; margin-top: 4px;}.amap_lib_placeSearch_poi { background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat; height: 31px; width: 19px; cursor: pointer; left: -1px; text-align: center; color: #fff; font: 12px arial, simsun, sans-serif; padding-top: 3px; position: absolute;} } } .btn{ position: fixed; bottom:20px; left:50%; padding:10px; } }</style>

補充知識：vue-amap 高德地圖定位 點擊獲取經緯度和具體地址的使用

官方文檔地址： 點這里！！

經緯度獲取只要通過點擊事件就可以通過e.lnglat來獲取，然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中寫入：AMap.Geocoder，注意 官方文檔中有提示：

所以插件中使用的依然是AMap,與導入名無關

不然會報錯，Geocoder無法使用。

定位文檔 照著文檔寫就行 注意在main.js中注冊AMap.Geolocation插件，

另外使用到地圖的.vue頁面 不能使用scoped對樣式進行局域化。

以上這篇vue+高德地圖實現地圖搜索及點擊定位操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。