vue+高德地图实现地图搜索及点击定位

首先需要在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 id="result" class="amap_lib_placeSearch" v-show="hide"><div class="amap_lib_placeSearch_list amap-pl-pc"  v-for="(item,index) in poiArr"@click="openMarkerTipById(index,$event)"@mouseout="onmouseout_MarkerStyle(index+1,$event)":key="index"><div class="poibox" style="border-bottom: 1px solid #eaeaea"><div class="amap_lib_placeSearch_poi poibox-icon" :class="index==selectedIndex?'selected':''">{{index+1}}</div><div class="poi-img" v-if="item.url" :style="'background-image:url('+item.url+'?operate=merge&amp;w=90&amp;h=56&amp;position=5)'"></div><h3 class="poi-title" ><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 class="btn" @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.latthis.location.Q =address.lngthis.address = address.addresslet 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.locationconsole.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的idAMap.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)})},//创建一个mapmapInit() {this.mapObj = new AMap.Map("iCenter", {resizeEnable: true,zoom: 10,})this.testevent();},//根据名字地址去搜索结果placeSearch(name) {let that = this;this.hide = truevar 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.poisvar resultCount = poiArr.lengththis.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&infowindowaddmarker(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 = 2var 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 打开搜索结果点tipthis.clickType = 1event.currentTarget.style.background = "#CAE1FF";this.selectedIndex = pointid// this.map = this.marker[pointid]this.map1 = this.poiArr[pointid].locationconsole.log(222,this.mapObj, this.marker[pointid])console.log(this.marker[pointid],this.poiArr[pointid])this.address = this.poiArr[pointid].address + this.poiArr[pointid].namethis.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+高德地图实现地图搜索及点击定位相关推荐

vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
vue高德/腾讯地图只显示某一区域的地图，其他地区不显示
一.高德地图 index.html 页面加上<script type="text/javascript" src="https://webapi.amap.com ...
vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue 高德地图不同区域显示不同颜色_老司机频繁掉沟里，高德百度腾讯地图导航到底该怎么选？...
导航类app发展至今,基本形成了三分天下的局面:高德.百度.腾讯,然而事实真的是三家平分天下么?三款不同的地图导航软件各有优缺点,至于什么路况选择哪个软件导航似乎更是一门玄学? 很多人想知道高德地图. ...
高德地图-实现地图搜索点选位置功能
高德地图-实现地图搜索点选位置功能 <!doctype html> <html> <head><meta charset="utf-8"& ...
vue 高德地图不同区域显示不同颜色_联测科技丨高德地图不仅仅是拿来导航的...
高德地图不仅仅当做一个导航工具,他还有许多不一样的用途. 隐藏功能一:制作高大上的PPT地图高德地图强悍的功能,我们需要进入这个网站:https://lbs.amap.com,也就是高德开放平台. ...

vue+高德地图实现地图搜索及点击定位

首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key

vue+高德地图实现地图搜索及点击定位相关推荐

最新文章

热门文章