实现效果 - 搜索和拖拽选址
思路
拖拽选址，用的是高德的UI组件库PositionPicker
添加圆标记用的是添加覆盖物-圆
搜索选址用的是搜索服务AMap.Autocomplete(根据输入关键字提示匹配信息)
重点
实现拖拽后会返回经纬度，主要是改变圆的位置，.circle.setCenter([location.lng,location.lat])，拖拽的时候，圆跟着位置点中心在动；
当搜索选址的时候，也会返回一个经纬度等位置信息，这时改变圆，地图不会动，地图的点标记也不会动，这时候，用一个方法搞定map.setFitView()
代码
<template><div class="addFence"><my-head title="新增围栏" iconL="back" :hslotr='hslotr' @on-click-hleft="triggerHLeft" @on-click-hright='triggerHRight'></my-head><div id="search"><div class="search_box"><div class="search_btn"><img src="/images/person/search.png" alt=""></div><input id="search_adress" maxlength="30" type="text" v-model="searchText" placeholder="请输入搜索地址"><div class="close" @click="clearSearch"><img src="/images/person/clear.png" alt=""></div></div></div><div id="map-container"></div><div class="fence_msg"><mt-field label="中心位置" type='textarea' multiline='true' v-model="centerLocation"></mt-field><mt-field label="围栏名称" placeholder="请输入围栏名称" v-model="fenceName"></mt-field><mt-field label="围栏半径" v-model="radius"><!-- <mt-range class="rangeBox" v-model="rangeValue" :disabled="true" :barHeight="1"><div slot="start"></div><div slot="end"></div></mt-range>--></mt-field><mt-field label="围栏报警" readonly placeholder="进围栏报警" v-model="fenceStyle" @click.native="choiceFenceStyle"><img src="/images/arrowrightbb.png"></mt-field><mt-actionsheet:actions= "data"v-model="sheetVisible"></mt-actionsheet></div></div></template><script>export default {data(){return{hslotr: '保存',rangeValue: '',centerLocation: '中心位置',fenceName: '围栏1',fenceStyle: '进围栏报警',data:[],sheetVisible: false,radius: 500,circle: null,map: {},searchText: ''}},mounted(){this.initMap();},methods:{triggerHLeft(){this.$router.go(-1);},triggerHRight(){console.log('点击了保存')},clearSearch(){this.searchText = '';},/* 做围栏圈圈 */addCircle(lat,lng,radius){lat = lat + "";lng = lng + "";this.circle = new AMap.Circle({center: new AMap.LngLat(lat,lng), // 圆心位置radius: radius, //半径strokeColor: "#76D5C2", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 1, //线粗细度fillColor: "#76D5C2", //填充颜色fillOpacity: 0.35 //填充透明度});this.map.add(this.circle);this.map.setFitView();},initMap(){const _this = this;_this.map = new AMap.Map('map-container', {zoom: 16,scrollWheel: false})/* 做地图拖拽选址 */AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {console.log('aaajdjdjdjdjdj')var positionPicker = new PositionPicker({mode: 'dragMap',map: _this.map});positionPicker.on('success', function(positionResult) {let position = positionResult.position;if(_this.circle){console.log(position.lng,position.lat)_this.circle.setCenter([position.lng,position.lat]);}else{_this.addCircle(position.lng, position.lat,_this.radius);}_this.centerLocation = positionResult.address;});positionPicker.on('fail', function(positionResult) {console.log('fail');});var onModeChange = function(e) {positionPicker.setMode(e.target.value)}positionPicker.start();});/* 搜索地址 */_this.map.plugin(["AMap.Autocomplete"], function() {var auto = new AMap.Autocomplete({input: "search_adress"});AMap.event.addListener(auto, "select", function(result){console.log(result);let location = result.poi.location;if(_this.circle){_this.circle.setCenter([location.lng,location.lat]);}else{_this.addCircle(location.lng, location.lat,_this.radius);}_this.map.setFitView();});});},choiceFenceStyle(){const _this = this;this.data = [{name: '进围栏报警', method: function () {_this.fenceStyle = '进围栏报警';_this.sheetVisible = false;}},{name: '出围栏报警', method: function () {console.log('出围栏报警')_this.fenceStyle = '出围栏报警';_this.sheetVisible = false;}},{name: '进/出围栏报警', method: function () {_this.fenceStyle = '进/出围栏报警';_this.sheetVisible = false;}},{name: '暂不报警', method: function () {_this.fenceStyle = '暂不报警';_this.sheetVisible = false;}}]this.sheetVisible = true;}}}</script>
如果觉得《高德地图 - 拖拽选址+搜索选址》对你有帮助，请点赞、收藏，并留下你的观点哦！
