高德地图选址组件

官方地址

   (function(){
       var iframe = document.getElementById('test').contentWindow;
       document.getElementById('test').onload = function(){
         iframe.postMessage('hello','https://m.amap.com/picker/');
       };
       window.addEventListener("message", function(e){
         alert('您选择了:' + e.data.name + ',' + e.data.location)
       }, false);
   }())

实现原理：依赖iframe，监听该组件，但是对 vue非常的不友好，监听要么点击延迟大，要么没反应，且它也停更了。。2018年之后没见动静

自我封装选址组件（依赖高德地图）

实现选址组件，需要使用到高德地图的
1. 定位
2. POI选点
3. 拖拽选址组件

话不多说，开始动手实现

引入所需第三方包（高德主包、高德UI包）

<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.4&key=自己的key值"></script>
<script type="text/javascript" src="//webapi.amap.com/ui/1.1/main.js"></script>

方便大家时间，直接上代码，注释有的, 样式我都给你写上。。

  <template>
      <div class="map-address">
        <div id="amap-test"></div>
        <div class="search">
          <input type="text" id="pickerInput" placeholder="请输入关键词">
        </div>
        <div class="address-list">
          <ul>
            <li v-for="item in address_list" :key="item.id" @click="sureAddress(item)">
              <p class="name">{{ item.name }}</p>
              <p class="detail">{{ item.address }}</p>
            </li>
          </ul>
        </div>
      </div>
    </template>
    <script>
    //高德地图POI选点使用jQuery，所以引入
    import $ from "jquery";
    
    export default {
      components: {},
      props: {
        data: {}
      },
      data() {
        return {
          address_list: [],
          map: {}
        };
      },
      mounted() {
        //实例化 地图，注意 全局一定要使用一个实例化地图，原因：在一个地图上来回操作，当然只需要一个实例化
        
        this.map = new AMap.Map("amap-test", {
          resizeEnable: true,
          zoom: 16
        });
        this.init();
        this.poiInit();
        this.getLocation() ;
      },
      methods: {
        //POI 选点
        poiInit() {
          let that = this;
          AMapUI.setDomLibrary($);
          AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
            var poiPicker = new PoiPicker({
              input: "pickerInput"
            });
            poiPicker.on("poiPicked", function(poiResult) {
              //选点成功回调，移动坐标点，同时会触发拖拽地图事件
              that.map.setCenter(poiResult.item.location);
            });
          });
        },
        //拖拽地图
        init() {
          let that = this;
          AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) {
            var positionPicker = new PositionPicker({
              mode: "dragMap",
              map: that.map
            });
            positionPicker.on("success", function(positionResult) {
              //地址列表
              that.address_list = positionResult.regeocode.pois;
            });
            positionPicker.on("fail", function(positionResult) {
              // 海上或海外无法获得地址信息
            });
            positionPicker.start();
          });
        },
        /**
         * 定位
         * 在模拟器上，延迟较大，真机测试就无问题
         * 注意 ios 手机，只有https网站才可定位，原因：自己百度
         */
        getLocation() {
          let that = this;
          AMap.plugin("AMap.Geolocation", function() {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,
              timeout: 5000,
              buttonOffset: new AMap.Pixel(10, 20),
              zoomToAccuracy: true,
              buttonPosition: "RB"
            });
    
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, "complete", onComplete);
            AMap.event.addListener(geolocation, "error", onError);
    
            function onComplete(data) {
              // data是具体的定位信息
              
              that.map.setCenter(data.position);
            }
    
            function onError(data) {
              // 定位出错
            }
          });
        },
        sureAddress(data) {
          let that = this;
          
          //选址成功，触发父组件。。
          that.$emit("sureAddress", data);
          
        
        }
      }
    };
    </script>
    <style lang='scss' scoped>
    .map-address {
      #amap-test {
        position: fixed !important ;
        width: 100vw;
        height: 50vh;
        top: 0;
      }
      #pickerInput {
        position: fixed;
        z-index: 10;
        top: 0;
        padding: 0.2rem 0.2rem;
        width: calc(100% - 0.4rem);
        border-radius: 5px;
        border: 1px solid #bbb;
      }
      .address-list {
        padding-top: 50vh;
        ul {
          overflow: auto;
          height: 50vh;
          li {
            padding: 11px;
            border-bottom: 1px solid #ddd;
            p:nth-of-type(1) {
              color: #333;
              font-size: 0.25rem;
            }
            p:nth-of-type(2) {
              color: #666;
              font-size: 0.18rem;
            }
          }
        }
      }
    }
    </style>

效果图