vue使用高德地图API,定位，搜索，拖拽选址

index.html，body中引入全局api

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'你的秘钥',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

<template><div><my-in-content><!-- 高德地图 --><div id="container"></div><div id="details"><Card style="width:340px;height:280px"><div style="text-align:lef;"><p>经纬度：{{this.lnglat}}</p><br/><p>地址：{{this.address}}</p><br/><p>最近的路口：{{this.nearestJunction}}</p><br/><p>最近的路：{{this.nearestRoad}}</p><br/><p>最近的POI：{{this.nearestPOI}}</p><br/></div></Card></div><!-- 搜索 --><div id="search"><Input v-model="searchValue" placeholder="请输入要搜索的位置" style="width: 300px" /><Button type="primary" @click="seachAddress">搜索</Button><Button style="margin-left:5px;" type="primary" @click="reporAddress">上报位置</Button></div></my-in-content></div>
</template>
<script>
export default {name:'gdmap',data() {return {searchValue:'',gdmap: null,/* 当前位置 */thisPosition: {location: '',lng: '',lat: ''},/* 选取的位置 */chosePosition: {location: '',lng: '',lat: ''},/* 范围圆的数据 */myCircle: {},/* 签到圆对象 */circle: {},/* 编辑器对象 */circleEditor: null,/* 拖拽对象 */positionPickerObj: {},//经纬度lnglat:'',//地址address:'',//最近的路口nearestJunction:'',//最近的路nearestRoad:'',//最近的POInearestPOI:'',/* 当前城市编码 */citycode: '020',//标记marker:[],}},created() {},mounted() {//地图初始化this.gdmap = new AMap.Map('container', {resizeEnable: true,//是否监控地图容器尺寸变化zoom: 15,//地图显示的缩放级别zooms: [3, 18],//地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；viewMode: '2D',//默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果})//加载工具条this.addTool();//获取当前位置this.thisLocation();},methods:{//工具条addTool () {AMap.plugin(['AMap.ToolBar'], () => {let toolbar = new AMap.ToolBar()this.gdmap.addControl(toolbar)})},//定位thisLocation () {this.gdmap.plugin('AMap.Geolocation', () => {let geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 100,            //超过10秒后停止定位，默认：无穷大maximumAge: 0,           //定位结果缓存0毫秒，默认：0convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,        //显示定位按钮，默认：truebuttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角buttonOffset:new AMap.Pixel(10,20),showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true,     //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false})this.gdmap.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', (data) => {console.log(data);//当前城市编码this.citycode = data.addressComponent.cityCode;//经纬度this.thisPosition = data.position;//地址this.formattedAddress=data.formattedAddress;this.chosePosition = this.thisPosition;/* 画圆 */this.cancelLocation()this.addCircle()/* 拖拽选址 */this.positionPicker();})AMap.event.addListener(geolocation, 'error', function (data) {alert('定位失败');})})},/* 拖拽选址 */positionPicker () {AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {this.positionPickerObj = new PositionPicker({mode: 'dragMarker', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'map: this.gdmap // 依赖地图对象})this.positionPickerObj.on('success', (positionResult) => {console.log(positionResult,"positionResult");this.chosePosition = positionResult.position;//经纬度console.log("经纬度:"+positionResult.position);this.lnglat=positionResult.position;//地址console.log("地址:"+positionResult.address);this.address=positionResult.address;//最近的路口console.log("最近的路口:"+positionResult.nearestJunction);this.nearestJunction=positionResult.nearestJunction;//最近的路console.log("最近的路:"+positionResult.nearestRoad);this.nearestRoad=positionResult.nearestRoad;//最近的POIconsole.log("最近的POI:"+positionResult.nearestPOI);this.nearestPOI=positionResult.nearestPOI;/* 画圆 */this.cancelLocation();this.addCircle();})this.positionPickerObj.start([this.chosePosition.lng, this.chosePosition.lat])})},/* 取消圆 */cancelLocation() {this.gdmap.remove(this.circle)if (this.circleEditor) {this.circleEditor.close()}},/* 画图 */addCircle() {this.myCircle = {center: [this.chosePosition.lng, this.chosePosition.lat], // 圆心位置radius: 50, // 半径strokeColor: '#FFFF00', // 线颜色strokeOpacity: 0.2, // 线透明度strokeWeight: 1, // 线粗细度fillColor: '#222222', // 填充颜色fillOpacity: 0.2 // 填充透明度}this.circle = new AMap.Circle(this.myCircle)this.circle.setMap(this.gdmap)// 引入多边形编辑器插件this.gdmap.plugin(['AMap.CircleEditor'], () => {// 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例this.circleEditor = new AMap.CircleEditor(this.gdmap, this.circle)// 开启编辑模式this.circleEditor.open()//this.myCircle.radius = this.circle.Mg.radiusthis.circleEditor.on('adjust', (data) => {this.myCircle.radius = data.radius})this.circleEditor.on('move', (data) => {console.log('移动')this.chosePosition.lng = data.lnglat.lngthis.chosePosition.lat = data.lnglat.lat})})},//搜索seachAddress(){if(this.searchValue!=''){//清楚地图上的覆盖物this.gdmap.clearMap();console.log("搜索");this.gdmap.plugin('AMap.PlaceSearch', () => {let placeSearch = new AMap.PlaceSearch({// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcodecity: '0797',map: this.gdmap});let that=this;placeSearch.search(this.searchValue, function (status, result) {// 查询成功时，result即对应匹配的POI信息console.log(result)var pois = result.poiList.pois;for(var i = 0; i < pois.length; i++){var poi = pois[i];var marker = [];marker[i] = new AMap.Marker({position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: poi.name});// 将创建的点标记添加到已有的地图实例：that.gdmap.add(marker[i]);}that.gdmap.setFitView();                        AMap.event.addListener(placeSearch,'markerClick',function(data){console.log(data);let result=data;//经纬度let lng=result.event.lnglat.lng;let lat=result.event.lnglat.lat;that.lnglat=lng+","+lat;//地址that.address=result.data.address;//最近路口that.nearestJunction='';//最近的路that.nearestRoad='';//最近的POIthat.nearestPOI='';})});})}                },//位置上报reporAddress(){},}
}
</script>
<style>#container {width:100%; height: 600px; }#search{z-index:999;position:absolute;left:100px;top:30px;opacity:0.8; }#details{z-index:999;position:absolute;right:0px;top:0px;opacity:0.8;}
</style>

效果图

vue使用高德地图API,定位，搜索，拖拽选址相关推荐

vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能
目录 JSAPI 的加载使用 JSAPI Loader (推荐) 实现效果: 需求:点击输入框弹窗地图弹窗,输入框输入地址模糊搜索列表结果,点击列表添加相应得marker标记,并且添加标记拖拽选址功 ...
Android - 集成高德地图API（搜索，地图，定位）
前言: 今天重构公司app的地图功能,刚好做个教程出来方便大家. 第一步: 注册高德开发用户,并来到控制台,点击应用管理->我的应用,然后创建新应用地址:高德开放平台 | 高德地图API 点击 ...
vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载
分以下步骤一.引入高德地图 1.在高德地图--控制台--获取key 2.npm 安装 3.新建一个vue文件作为地图容器二.引入animate.css动画 1.npm 安装 2.main.js引 ...
vue 实现高德地图 api 掩模、定位、天气
vue渲染掩模.定位.天气. /* #app.vue中的代码或其他vue文件 #public/index.html需要引入高德地图jsapi*/ <script type="text ...
ios 高德获取定位_解决ios11不支持高德地图API定位功能的方法
在 iOS 11 系统上访问JS API定位业务失败怎么解决? 苹果新发的 iOS 11 操作系统的一大特性是对 http 形式访问页面的限制变得非常严格(相比iOS 10 和 iOS 9).高德提供 ...
Vue结合HTML5拖放API 实现目录拖拽～
拖放事件 dom被拖拽--->经过一些dom--->到达指定dom 被拖拽的dom:(源对象) dragstart 源对象被拖拽 drag 源对象拖拽过程中 dragend 源对象拖拽结束 ...
android百度地图拖拽地图定位,百度地图的定位以及拖拽（显示坐标位置）
搜索热词截图示例 html{height:100%} body{height:100%;margin:0px;padding:0px} #map_canvas{ margin:0 auto; bor ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...

vue使用高德地图API,定位，搜索，拖拽选址

vue使用高德地图API,定位，搜索，拖拽选址相关推荐

最新文章

热门文章