Vue中使用高德地图

Vue中使用高德地图定位及poi搜索，以及其他插件的使用方法

1、第一步安装 npm install vue-amap --save

2、引入vue-amap

main.js

import Vue from 'vue';
import VueAMap from 'vue-amap';
import App from './App.vue';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({             //可全局初始化，也可按需初始化
  key: 'your amap key',
  uiVersion: '1.0.11', // 如果要使用官方的ui 在此必须要配置
  //plugin是你要使用到的插件，直接在这里注册
  plugin: [
    'AMap.Geocoder',
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', // 编辑 折线多，边形
    'AMap.CircleEditor', // 圆形编辑器插件
    'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

new Vue({
  el: '#app',
  render: h => h(App)
})

3、使用(自定义poi搜索及定位)

<template>
  <div>
    <p>{{address}}</p>
    <div class="search-box">
      <input v-model="searchKey" type="search" id="search">
      <button @click="searchByHand">搜索</button>
    </div>
    搜索结果：
    <ul v-if="searchKey!==''">
      <li v-for="item in result" :key="item.id" @click="checkAddress(item)">{{item.name}}</li>
    </ul>
    <div class="amap-page-container">
      <el-amap vid="amap" :zoom="zoom" class="amap-demo" :center="center" :amapManager="amapManager" :events="events">
        <el-amap-circle vid="circle" :center="center" :radius="100" fill-opacity="0.2" strokeColor="#38f"
          strokeOpacity="0.8" strokeWeight="1" fillColor="#38f">
        </el-amap-circle>
      </el-amap>
    </div>
  </div>
</template>


<script>
  import {
    AMapManager
  } from "vue-amap"
  let amapManager = new AMapManager();
  export default {
    data() {
      let vm = this;
      return {
        zoom: 16,
        center: [121.329402, 31.228667],
        result: [],
        address: "",
        searchKey: '',
        amapManager,
        map: null,
        events: {
          init(o) {
            vm.map = o;
          }
        },
      };
    },
    watch: {
      map: function() {
        if (this.map != null) {
          this.initSearch();
        }
      }
    },
    //使用AMap.插件时，必须先去main.js注册
    methods: {
      initSearch() {
        var vm = this;
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        this.map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status, result) {
          if (status == 'complete') {
            vm.center = [result.position.lng, result.position.lat]
          }
        })
      },
      searchByHand() { //搜索
        var vm = this;
        if (this.searchKey != '') {
          var autoOptions = {
            city: '全国'
          }
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(vm.searchKey, function(status, result) {
            if (result.info == "OK") {
              vm.result = result.tips;
            }
          })
        }
      },
      checkAddress(item) { //选择搜索的项
        this.address = item.name
        this.center = [item.location.lng, item.location.lat];
      }
    }
  }
</script>

<style scoped>
  .amap-page-container {
    height: 300px;
    position: relative;
  }
  .search-box {
    width: 90%;
    left: 5%;
    top: 10px;
    height: 30px;
    margin-bottom: 30px;
  }
  .search-box input {
    float: left;
    width: 80%;
    height: 100%;
    border: 1px solid #38f;
    padding: 0 8px;
  }
  .search-box button {
    float: left;
    width: 20%;
    height: 100%;
    background: #38f;
    border: 1px solid #38f;
    color: #fff;
  }
</style>

4、官方的AMapUI poi搜索(不需要的可忽略)

<template>
  <div>
      <button @click="initSearch">搜索</button>
      <p>{{address}}</p>
      <hr>
      <div class="amap-page-container">
        <div class="search-box" v-if="toSearch">
          <input  
            v-model="searchKey"
            type="search"  
            id="search">
          <button @click="searchByHand">搜索</button>
          <div class="tip-box" id="searchTip"></div>
        </div>
        <el-amap 
          vid="amap" 
          :zoom="zoom" 
          class="amap-demo" 
          :center="center"
          :amapManager="amapManager"
          :events="events"
          >
          <el-amap-circle 
            vid="circle"
            :center="center" 
            :radius="radius" 
            fill-opacity="0.2"
            strokeColor="#38f"
            strokeOpacity="0.8"
            strokeWeight="1"
            fillColor="#38f"
            >
          </el-amap-circle>
        </el-amap>
      </div>
      <ul>
        <li v-for="item in result" :key="item.id">{{item.name}}</li>
      </ul>
    </div>
</template>

<script>
import {AMapManager} from "vue-amap"
  let amapManager=new AMapManager();
  export default {
    data() {
      let vm = this;
      return {
        zoom:16,
        center: [121.329402,31.228667],
        result:[],
        address:"",
        radius:100,
        toSearch:false,
        searchKey:'',
        amapManager,
        map:null,
        poiPicker:null,
        events:{
          init(o){
            vm.map=o;
          }
        }
      };
    },
    watch:{
      map:function(){
        if(this.map!=null){
          //this.initSearch();
        }
      }
    },
    methods:{
      initSearch(){
        let vm=this;
        let map=this.amapManager.getMap();
        this.toSearch=true;
        AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
          var poiPicker = new PoiPicker({
              input: 'search', //输入框id
              placeSearchOptions: {
                map: map,
                pageSize: 10
              },//地点搜索配置
              suggestContainer:'searchTip',//输入提示显示DOM
              searchResultsContainer:'searchTip'//搜索结果显示DOM
          });
          vm.poiPicker=poiPicker;
          //监听poi选中信息
          poiPicker.on('poiPicked', function(poiResult) {
            let source = poiResult.source;
            let poi = poiResult.item;
            if (source !== 'search') {
                poiPicker.searchByKeyword(poi.name);
            } else {
              poiPicker.clearSearchResults();
              vm.center=[poiResult.item.location.lng,poiResult.item.location.lat];
              vm.address=poi.name;
              vm.searchKey="";
              vm.toSearch=false;
            }
          });
        });
      },
      searchByHand(){
        if(this.searchKey!=''){
          this.poiPicker.searchByKeyword(this.searchKey);
        }
      }
    }
  };
</script>

<style scoped>
  .amap-page-container {
    height: 300px;
    position: relative;
  }
  .search-box{
    position: absolute;
    z-index: 5;
    width: 90%;
    left: 5%;
    top: 10px;
    height: 30px;
  }
  .search-box input{
    float: left;
    width: 80%;
    height: 100%;
    border: 1px solid #38f;
    padding: 0 8px;
  }
  .search-box button{
    float: left;
    width: 20%;
    height: 100%;
    background: #38f;
    border: 1px solid #38f;
    color: #fff;
  }
  .tip-box{
    width: 100%;
    max-height:260px;
    position: absolute;
    top: 30px;
    overflow-y: auto;
    background-color: #fff;
  }
  .toolbar{
    margin-top: 15px;
  }
  hr{
    border-color: red;
    border-style: dashed;
  }
</style>

备注：

1、使用高德的api注意事项：

1. 先进行插件的注册，在main.j地图初始化中plugin写上要使用的api插件
2. api使用：这里例如定位api的使用

var geolocation = new AMap.Geolocation            //AMap.Geolocation就是main.js注册的插件
geolocation.getCurrentPosition(function(status, result) {
 if (status == 'complete') {
    vm.center = [result.position.lng, result.position.lat]
  }
})

相关文档：

高德地图的api及参考示例可查看高德开放平台(地址如下)

高德地图api入口
高德地图api使用示例入口
vue-amap文档入口