uniapp H5端实现地图定位，拖动定点，搜索选址

uniapp H5端实现地图定位，拖动定点，搜索选址

1、npm install vue-amap --save 安装VUEAMAP

2、main.js 里面 需要申请高德 地图网站KEY

//高德地图
// #ifdef H5
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key:"key",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  v: "1.4.4",
  uiVersion: '1.0'
});
// #endif

3、选择地图页面

<template>
  <view class="pages map-select">
	<el-amap-search-box class="map-search" ref="search" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>		
    <view class="map">
    <el-amap vid="amap" :zoom="zoom" class="amap-demo" :center="center" :amapManager="amapManager" :events="events"></el-amap>
    </view>
    <view class="map-list">
      <view class="ul">
        <view class="li" v-for="(item,index) in result" @click="getLocation(item)">
          <view class="h3">{{item.name}}</view>
          <view class="p">{{item.address}}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.map-select .map-search{position:fixed; height:100rpx; box-sizing: border-box; width:100%; padding-top:10rpx; left:0; right:0; top:0; background:#fff; z-index:222; padding-left:20rpx; padding-right:100rpx; position: relative;}	
.map-select .map{ height:50%; box-sizing: border-box; position:fixed; padding-top:80rpx; width:100%; left:0; top:0; right:0; margin: auto; overflow: hidden;}
.map-select .map .amap-demo{ height:100%;}
.map-select .map .amap-geolocation-con{ z-index:22 !important;}
.map-select .map-list{height:50%; overflow-y:auto; position: fixed; width:100%; background:#fff; left:0; bottom:0; right:0; margin: auto;}
.map-select .map-list .li{padding:20rpx; border-bottom:1px solid #f7f7f7;}
.map-select .map-list .h3{ font-size:30rpx; font-weight: bold;}
.map-select .map-list .p{ font-size:26rpx; color:#888; transform-origin: left;}
/deep/ .el-vue-search-box-container .search-box-wrapper .search-btn{ background:#007AFF; color:#fff; font-size:35rpx;}
/deep/ .el-vue-search-box-container .search-tips{  border:0; border-top:2rpx solid #eee; position: fixed; z-index:2222; top:203rpx; width:100%; left:0; max-height:100%; overflow-y:auto;}
/deep/ .el-vue-search-box-container .search-tips ul li{ font-size:30rpx; box-shadow: none; border-bottom:2rpx solid #eee; height:90rpx; line-height:90rpx;}
/deep/ .el-vue-search-box-container .search-box-wrapper .search-btn{ font-size:30rpx;}
</style>
<script>
import {AMapManager} from "vue-amap"
let amapManager=new AMapManager();
export default {
  data() {
    let vm = this;
    return {
       keyword:'',
       zoom:16,
       center: [114.28797,22.762259],
       lngLat:'',
       result:[],
       address:"",
       radius:100,
       toSearch:false,
       amapManager,
       map:null,
       positionPicker:null,
       events:{
         init(o){
           vm.map=o;
         }
       },
		searchOption: {
			city: '深圳',
			citylimit: false,
		},
    };
  },
  watch:{
   map:function(v){
    if(v != null){
      this.startDrag();
    }
   }
  },
  methods: {
     //拖拽地图
     startDrag(){
      let vm = this;
      let map = this.amapManager.getMap();
      AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        vm.positionPicker = new PositionPicker({mode: 'dragMap',map: map});
        //定位
        let geolocation;
        map.plugin('AMap.Geolocation', function () {
          geolocation = new AMap.Geolocation({
            showButton: true,        //显示定位按钮，默认：true
            showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：true
            extensions:'all',
            timeout: 5000
          })
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', function(data){
            vm.positionPicker.start();
          });//返回定位信息
        })
        vm.positionPicker.on('success', function(positionResult){
            vm.result = positionResult.regeocode.pois;
            vm.address=positionResult.regeocode.formattedAddress;
        })
        vm.positionPicker.on('fail', function(failResult){
          console.log(failResult+'fail')
        })
        vm.positionPicker.start();
      })
    },
				
	onSearchResult(pois) {					
		if (pois.length > 0) {									
		let lng = pois[0].lng;
		let lat = pois[0].lat;
		this.center = [lng, lat];
		}							
	},					
				
    //获取当前选中座标
    getLocation(item){
       let params = {address:item.address,lat:item.location.lat,lng:item.location.lng};       
    },
  }
};
</script>