高德地图 - 拖拽选址+搜索选址

实现效果 - 搜索和拖拽选址

思路

拖拽选址，用的是高德的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>

高德地图 - 拖拽选址+搜索选址相关推荐

高德地图四：关键字搜索
高德地图四:关键字搜索关键字检索介绍根据关键字检索适用于在某个城市搜索某个名称相关的POI,例如:查找北京市的"肯德基". 注意:关键字未设置城市信息(默认为全国搜索)时,如果 ...
@antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等
html <div class="charts-box"><div style="min-height: 300px; justify-content: ...
react Amap引入高德地图，并实现搜索定位。
react 引入高德地图,并实现搜索定位一.react 引入Amap: Amap官方地址:https://elemefe.github.io/react-amap/articles/start 按照 ...
android地图拖动事件,地图拖拽相关事件
事件系统 html, body, #container { width: 100%; height: 100%; } 请用鼠标拖拽地图试试地图拖拽相关事件绑定事件解绑事件 //初始化地图对象,加 ...
Android开发丶基于高德地图实现定位、搜索定位、绘制圆圈自定义图标及改变圆圈半径等功能
前一段时间接了个需求,进入一个地图界面,可以获取当前位置信息,通过输入位置信息获取位置,绘制圆圈并可以实时改变圆圈半径等功能,地图SDK我们使用的是高德地图,仔细阅读了开发文档,发现这些需求都可以通过 ...
Flutter 调用高德地图APP实现位置搜索、路线规划、逆地理编码
1 开发准备 pubspec.yaml 配置文件中添加插件 dependencies:flutter:sdk: flutterurl_launcher: ^6.1.2 iOS 配置 info.plis ...
高德地图——定位，POI搜索
1.创建应用获取KEY 创建应用填写应用相关的信息获取SHA1值获取KEY值 2.Android studio 项目配置,集成SDK 配置Gradle,通过build.gradle进行sdk的配 ...
高德地图api之兴趣点搜索
除了定位basic map,我们现在探讨一下使用api中提供的搜索兴趣点服务和路线查找服务: 高德地图的api提供了对千万级别的兴趣点的搜索,PoiSearch有几种方式:常用的有关键字搜索,类型搜索 ...
高德地图实现画线搜索
今天分享一下,使用高德地图api实现上图可自由画线的效果. 查看高德官方文档会发现,并没有可自主画图,文档提供的矢量图功能有: AMap.Polyline 构造折线 AMap.BezierCurve ...

高德地图 - 拖拽选址+搜索选址

实现效果 - 搜索和拖拽选址

思路

代码

高德地图 - 拖拽选址+搜索选址相关推荐

最新文章

热门文章