vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

2024-03-22 前端 0

PC端高德地图使用步骤：

1、注册并登录高德开放平台获取
2、安装高德依赖（amap-jsapi-loader）
3、初始化地图
4、首次打开地图获取当前定位并标记
5、根据已有地址自动定位到指定地址并标记
6、新增、清除标记及自定义信息窗体
7、鼠标点击地图并选点标记
8、根据关键字搜索并自动定位
9、效果图
10、完整代码

高德官方api：高德官方开放平台

一、注册并登录高德开放平台获取（key和秘钥）
在这里插入图片描述
引用：

<script>  import AMapLoader from '@amap/amap-jsapi-loader';  window._AMapSecurityConfig = {    securityJsCode: '**************************',//你的秘钥  } </script>

二、安装高德依赖

npm i @amap/amap-jsapi-loader --save

三、初始化地图
封装公共的地图组件：

 <map-container :positionInfo ='positionInfo' @select ='getLocationInfo'></map-container>

 mounted() {      this.initMap() }, methods:{    initMap(){      AMapLoader.load({        key:"**********************", // 申请好的Web端开发者Key，首次调用 load 时必填        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15        plugins: [          //需要使用的插件          'AMap.ToolBar',          'AMap.Scale',          'AMap.Geolocation',          'AMap.PlaceSearch',          'AMap.AutoComplete',          'AMap.Geocoder',          'AMap.CitySearch'        ],        resizeEnable: true,      }).then((AMap)=>{        const that = this;        that.map = new AMap.Map("container",{  //设置地图容器id          viewMode:"3D",    //是否为3D地图模式          zoom:12,          //初始化地图级别        });     }).catch(e=>{      console.log(e);     }) },

四、首次打开地图获取当前定位并标记

initMap(){   AMapLoader.load({      key:"*******************", // 申请好的Web端开发者Key，首次调用 load 时必填      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15      plugins: [        'AMap.ToolBar',        'AMap.Scale',        'AMap.Geolocation',        'AMap.PlaceSearch',        'AMap.AutoComplete',        'AMap.Geocoder',        'AMap.CitySearch'      ],      resizeEnable: true,    }).then((AMap)=>{      const that = this;      that.map = new AMap.Map("container",{  //设置地图容器id        viewMode:"3D",    //是否为3D地图模式        zoom:12,          //初始化地图级别      });      that.getCurrentLocation();//获取当前定位      that.geocoder = new AMap.Geocoder()      that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺      that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件，在地图右下角显示地图的缩略图    }).catch(e=>{      console.log(e);    })  },  //获取当前定位  getCurrentLocation(){    const that = this;    that.geolocation = new AMap.Geolocation({      timeout: 3000,          //超过3秒后停止定位，默认：5s      enableHighAccuracy: true,      zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点    });    that.geolocation.getCurrentPosition(function(status,result){    //备注：getCurrentPosition方法会调用超时或失败：    //Get geolocation time out：浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象。    //另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。    //Get geolocation failed：定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。      console.log(status,result);      if(status=='complete'){        that.onComplete(result)      }else{        that.onError(result) //失败后可使用getCityInfo获取非精准定位（具体到省市）      }    });  },  //解析定位结果  onComplete(data) {    console.log('定位结果：' + data.position) //经纬度信息    let lnglat = data.position;    let marker = new AMap.Marker({  //创建标记      position: new AMap.LngLat(lnglat[0], lnglat[1])    })    this.map.clearMap()// 清除所有覆盖物（点标志）    this.map.add(marker)// 添加点标志    let that = this    //经纬度转换为中文地址详情    that.geocoder.getAddress(lnglat, function (status, result) {      if (status === 'complete' && result.regeocode) {        that.address = result.regeocode.formattedAddress;        that.showInfoWindow(marker);//自定义信息窗体      } else {        that.$message.error('根据经纬度查询地址失败')      }    })  },  //解析定位错误信息  onError(data) {    this.getLngLatLocation()  },  //在获取具体定位失败时调用的代码：（非精准定位！！！）  getLngLatLocation() {    const that = this;    that.geolocation.getCityInfo(function (status, result) {      if (status === 'complete') {        let data = result.position        that.address = result.province + result.city;        that.showLocation(data)      } else {        that.$message.error('获取地址失败')      }    })  },

五、根据已有地址自动定位到指定地址并标记

initMap(){   AMapLoader.load({      key:"*******************", // 申请好的Web端开发者Key，首次调用 load 时必填      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15      plugins: [        'AMap.ToolBar',        'AMap.Scale',        'AMap.Geolocation',        'AMap.PlaceSearch',        'AMap.AutoComplete',        'AMap.Geocoder',        'AMap.CitySearch'      ],      resizeEnable: true,    }).then((AMap)=>{      const that = this;      that.map = new AMap.Map("container",{  //设置地图容器id        viewMode:"3D",    //是否为3D地图模式        zoom:15,           //初始化地图级别        center：[that.positionInfo.lng,that.positionInfo.lat];   // 首次加载地图自动加载到指定位置中心      });      that.showLocation(data) //新增标记并展示信息窗体      that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺      that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件，在地图右下角显示地图的缩略图    }).catch(e=>{      console.log(e);    })  },

六、新增、清除标记及自定义信息窗体

//新增标记showLocation(data){   let marker = new AMap.Marker({     position: new AMap.LngLat( data[0],data[1]) //参数为经纬度   })   this.map.clearMap()// 清除所有覆盖物（点标志）   this.map.add(marker)// 添加点标志   this.showInfoWindow(marker);//自定义信息窗体 },//自定义信息窗体showInfoWindow(marker){  let infoWindow = new AMap.InfoWindow({    isCustom: true, //是否自定义信息窗体    content:  `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.address}</div>`,    closeWhenClickMap: true,    zIndex: 999,    offset: new AMap.Pixel(16, -35)  });  infoWindow.open(this.map, marker.getPosition());},

七、鼠标点击地图并选点标记

 initMap(){   AMapLoader.load({      key:"*******************", // 申请好的Web端开发者Key，首次调用 load 时必填      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15      plugins: [        'AMap.ToolBar',        'AMap.Scale',        'AMap.Geolocation',        'AMap.PlaceSearch',        'AMap.AutoComplete',        'AMap.Geocoder',        'AMap.CitySearch'      ],      resizeEnable: true,    }).then((AMap)=>{      const that = this;      that.map = new AMap.Map("container",{  //设置地图容器id        viewMode:"3D",    //是否为3D地图模式        zoom:12,           //初始化地图级别      });      that.geocoder = new AMap.Geocoder()      that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺      that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件，在地图右下角显示地图的缩略图       that.handleClick(AMap)//地图选点    }).catch(e=>{      console.log(e);    })  },   //点击地图获取地理位置  handleClick(){    this.map.on('click', (e) => {      let lng = e.lnglat.lng      let lat = e.lnglat.lat      let marker = new AMap.Marker({        position: new AMap.LngLat(lng, lat)      })      this.map.clearMap()// 清除所有覆盖物（点标志）      this.map.add(marker)// 添加点标志      let lnglat = [lng, lat]      let that = this      that.geocoder.getAddress(lnglat, function (status, result) {        if (status === 'complete' && result.regeocode) {          that.address = result.regeocode.formattedAddress;          that.showInfoWindow(marker);//自定义信息窗体         let thisPosition = {           address: that.address,           lng: lng,           lat: lat          };          that.$emit("select",thisPosition) //返回给父组件        } else {          that.$message.error('根据经纬度查询地址失败')        }      })    })  },

八、根据关键字搜索并自动定位

//搜索框及搜索结果选择窗<template>  <div>  	//搜索框    <div class="map-box">      <div class="label">关键字搜索</div>      <el-input        v-model="mapAddress"        placeholder="请输入内容"        id="tipinput"        @keyup.enter.native="searchKeyWord"      >      </el-input>      <el-button type="primary" @click="searchKeyWord"  icon="el-icon-search" ></el-button>    </div>    //搜索结果选择窗    <div class="map_search_result"  v-if="showSearchResult">      <ul>        <li  @click="markerResult(item)" v-for="(item,index) in poiList" :key="index">{{item.name}}</li>      </ul>    </div>    //地图    <div id="container" :style="{width: width, height: height}"></div>  </div></template>

initMap(){   AMapLoader.load({      key:"*******************", // 申请好的Web端开发者Key，首次调用 load 时必填      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15      plugins: [        'AMap.ToolBar',        'AMap.Scale',        'AMap.Geolocation',        'AMap.PlaceSearch',        'AMap.AutoComplete',        'AMap.Geocoder',        'AMap.CitySearch'      ],      resizeEnable: true,    }).then((AMap)=>{      const that = this;      that.map = new AMap.Map("container",{  //设置地图容器id        viewMode:"3D",    //是否为3D地图模式        zoom:12,           //初始化地图级别      });      that.handleClick(AMap)//地图选点      that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺      that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件，在地图右下角显示地图的缩略图      that.geocoder = new AMap.Geocoder()      that.mapSearchInit()    }).catch(e=>{      console.log(e);    })  },

 /** 初始化搜索 */  mapSearchInit(){     let autoOptions = {       input: "tipInput",     }     let autoCompleteComponent= new AMap.Autocomplete(autoOptions);     this.autoCompleteComponent = autoCompleteComponent;     // 注册placeSearch组件     this.placeSearchComponent = new AMap.PlaceSearch()   },   //根据输入内容查询   searchKeyWord(){     let that= this     that.placeSearchComponent.search(that.mapAddress, function (status, result) {       if(status==='complete' && result.info === "OK"){         that.showsearchResult = true         that.poiList = result.poiList.pois       }else{         that.showsearchResult = false         that.poiList = []         that.$message({           message: "没有查到结果",           type: "warning",         });       }     })   },   //选择搜索的内容   markerResult(data){     this.showsearchResult = false;     this.address = data.name;     var marker = new AMap.Marker({       position: [Number(data.location.lng),Number(data.location.lat)],     });     this.map.clearMap()// 清除所有覆盖物（点标志）     this.map.add(marker)// 添加点标志     this.showInfoWindow(marker);     setTimeout(() => {       this.map.setCenter(data.location);       this.map.setZoom(15);     }, 50)     let thisPosition = {       address: this.address,       lng: data.location.lng,       lat: data.location.lat     };     this.$emit("select",thisPosition)   },