用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址

<template><div class="wrap"><div><div>详细地址:{{ addressKeyWord }}</div><div>经纬度:{{ lnglat }}</div><div>备注地点名:{{ locationName }}</div></div><div id="container"></div><a-inputstyle="width: 199px"v-model="addressKeyWord"id="pickerInput"placeholder="请输入关键字"/></div>
</template>
<script>
export default {data () {return {lnglat: [116.397428, 39.90923],addressKeyWord: "",locationName: ''}},mounted () {this.handleInitMap()},methods: {handleInitMap () {this.map = new AMap.Map('container', {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 14, //初始化地图层级center: this.lnglat//初始化地图中心点})this.handleAddMarker()this.map.on('click', (ev) => {// 触发事件的地理坐标，AMap.LngLat 类型var lnglat = ev.lnglatconsole.log(ev, lnglat)this.lnglat = [lnglat.lng, lnglat.lat]this.map.clearMap()this.handleAddMarker()this.map.setCenter(this.lnglat)// 将经纬度坐标转化为详细地址AMap.plugin('AMap.Geocoder', () => {var geocoder = new AMap.Geocoder({extensions: 'all'// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode})var lnglat1 = [lnglat.lng, lnglat.lat]geocoder.getAddress(lnglat1, (status, result) => {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息console.log(result, '详细地址')this.addressKeyWord = result.regeocode.formattedAddressthis.locationName = result.regeocode.pois[0].name}})})})//加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {//缩放控件this.map.addControl(new BasicControl.Zoom({position: 'rb', //left top，左上角showZoomNum: false //显示zoom值}))})//加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {var poiPicker = new PoiPicker({input: 'pickerInput' //输入框id})//监听poi选中信息poiPicker.on('poiPicked', (poiResult) => {//用户选中的poi点信息console.log(poiResult, "poiResult")let lnglat = poiResult.item.locationthis.addressKeyWord = poiResult.item.namethis.lnglat = [lnglat.lng, lnglat.lat]this.map.clearMap()this.handleAddMarker()this.map.setCenter(this.lnglat)})})},handleAddMarker () {// 构造点标记const marker = new AMap.Marker({icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",position: this.lnglat})// 构造矢量圆形const circle = new AMap.Circle({center: new AMap.LngLat(this.lnglat[0], this.lnglat[1]), // 圆心位置radius: 1000,  //半径strokeColor: "#1890ff",  //线颜色strokeOpacity: 1,  //线透明度strokeWeight: 3,  //线粗细度fillColor: "#1890ff",  //填充颜色fillOpacity: 0.35 //填充透明度})// 将以上覆盖物添加到地图上// 单独将点标记添加到地图上this.map.add(marker)// add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上this.map.add([marker, circle])}},
};
</script>
<style lang="scss" scoped>
#container {width: 100%;height: 500px;
}
.wrap {position: relative;#pickerInput {position: absolute;right: 0;top: 50px;z-index: 99999;}
}
</style>

用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址相关推荐

高德地图js 开发二：添加标记点
初始化并添加点 var map;//地图对象InitMap(11, [114.312151, 30.58454]);//默认武汉中心坐标//地图初始化function InitMap(zoom, ar ...
vue - 实现 H5 网站使用腾讯地图，附带地图使用教程 / 当前用户 IP 定位获取位置信息教程（详细配置教程及运行示例源代码，保证新手小白 100% 成功）vue.js 或 nuxt.js都行
效果图百度的教程基本上都不行,本篇文章做优质教程,从 0-1 完整详细的配置流程及地图功能的使用方式. Vue.js 网站项目中,引入配置腾讯地图详细教程,并附带详细的地图使用及IP 定位等常见功能 ...
uniapp - 实现 H5 网站使用腾讯地图，附带地图使用教程 / 当前用户 IP 定位获取位置信息教程（详细配置教程及运行示例源代码，保证新手小白 100% 成功）
效果图百度的教程基本上都不行,本篇文章做优质教程,从 0-1 完整详细的配置流程及地图功能的使用方式. 实现了 uniapp h5网站项目中,引入配置腾讯地图详细教程,并附带详细的地图使用及IP 定 ...
LeafletJS 简单使用2 - 地图标点L.marker()、清除标点removeLayer、点击地图标点、清除地图map.remove()、画点线L.polygon()、画圆L.circle()
目录 1. 业务需求 2. 代码示例注意的点补充示例:`L.polygon()` 画点线.`L.circle()` 画圆(该文档中未涉及) 3. 页面展示 1. 业务需求现有数据:初始经纬度信息 ...
2维数组 qt_Qt编写地图综合应用11-动态添加
## 一.前言在添加设备点或者区域形状的时候,会考虑是直接静态的方式写入到网页中加载,还是动态js函数异步加载的方式,这个需要根据现场的实际需求来,如果只需要一次加载的话建议静态即可,如果运行期间还 ...
地图选点（百度地图web端）
百度地图的地图选点组件一.介绍地图选点指的是可在地图上搜索指定位置,获取到经纬度,或者通过点击地图上的某个位置,获取到详细的中文地址和经纬度.腾讯地图和高德地图都有官方的已封装好的组件可直接调用, ...
高德地图搜索，点击地图获取经纬度
1.H5页面一个搜索框.一个经纬度接收框 <input class="layui-input" placeholder="地名" name=" ...
调用百度地图接口，在地图上添加标记并点击显示具体信息
对于在想实现地图功能时,百度地图和高德地图都提供了很好的API接口,直接进入官网查找相应的开发文档即可. 我这里使用的是百度地图,首先你得申请一个百度的密钥,这个很简单,网上很多教程. 货不多说,下面 ...
地图绘制边界。高德。PPMAP。鼠标点击经纬度坐标。地图图标点点击弹窗窗口。地图图标点点击事件。
边界: == 第一种:绘制边界. 通过绘制多边形的API来绘制边界. 高德API:多边形 Polygon. 矢量图形-覆盖物-教程-地图 JS API | 高德地图API 将关键的边界轮廓经纬度坐标 ...

用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址

用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址相关推荐

最新文章

热门文章