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

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

最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下

效果图如下

下边就是实现过程

html部分

js部分

css部分

  #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;
    }
  }

补充知识：vue-amap 高德地图定位 点击获取经纬度和具体地址的使用

官方文档地址： 点这里！！

经纬度获取只要通过点击事件就可以通过e.lnglat来获取，然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中写入：AMap.Geocoder，注意 官方文档中有提示：

所以插件中使用的依然是AMap,与导入名无关

不然会报错，Geocoder无法使用。

定位文档 照着文档写就行 注意在main.js中注册AMap.Geolocation插件，

另外使用到地图的.vue页面 不能使用scoped对样式进行局域化。

以上这篇vue+高德地图实现地图搜索及点击定位操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。