vue项目中使用高德地图实现添加点标记和获取点击位置信息

<template><div class="container"><div id="map-container">地图</div></div>
</template><script>
export default {name: '',components: {},data () {return {map: null,markers: [],markersPosition: [],geoCoder: null}},mounted () {this.mapInit()},methods: {mapInit () {// eslint-disable-next-line no-undefthis.map = new AMap.Map('map-container', {zoom: 11, // 级别// center: [116.397428, 39.90923], // 中心点坐标// layers: [ // 使用多个图层//   // 卫星//   new AMap.TileLayer.Satellite(),//   // 路网//   new AMap.TileLayer.RoadNet()// ],resizeEnable: true// viewMode: '3D'// 使用3D视图})// eslint-disable-next-line no-undefthis.geoCoder = new AMap.Geocoder()this.handlerMapClick()},handlerMapClick () {this.map.on('click', (e) => {// 点击坐标this.markersPosition = [e.lnglat.lng, e.lnglat.lat]this.removeMarker()// 设置新的标记this.setMapMarker()// eslint-disable-next-line no-undef// 根据坐标获取位置信息this.geoCoder.getAddress(this.markersPosition, (status, result) => {if (status === 'complete' && result.regeocode) {this.address = result.regeocode.formattedAddressconsole.log('点击位置信息：', result.regeocode.formattedAddress)// idlet adcode = result.regeocode.addressComponent.adcode//   let reg = /.+?(省|市|自治区|自治州|县|区)/glet provinceId = parseInt(adcode.substr(0, 2) + '0000')let cityId = parseInt(adcode.substr(0, 4) + '00')let areaId = adcodeconsole.log('点击位置的省市区id：', provinceId, cityId, areaId)}})})},// 设置点击位置的标记setMapMarker () {let marker = new AMap.Marker({map: this.map,position: this.markersPosition})// 将 markers 添加到地图this.markers.push(marker)},// 添加标记addMarker () {//   经度 纬度let lng = Math.random() * 135.05 + 73.3let lat = Math.random() * 53.33 + 3.51console.log('添加标记', [lng, lat])// 添加标记this.map.setFitView()let marker = new AMap.Marker({map: this.map,position: [lng, lat]// content: markerContent// eslint-disable-next-line// offset: new AMap.Pixel(-13, -30)})// 将 markers 添加到地图this.markers.push(marker)this.map.setFitView()`在这里插入代码片`// 鼠标点击marker弹出自定义的信息窗体// eslint-disable-next-line no-undefAMap.event.addListener(marker, 'click', function (e) {console.log('点击marker', e)})},// 删除之前后的标记点removeMarker () {if (this.markers) {this.map.remove(this.markers)}}}
}
</script><style scoped lang="scss">
#map-container {width: 70vw;height: 70vh;
}
</style>

vue项目中使用高德地图实现添加点标记和获取点击位置信息相关推荐

在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...
在vue项目中引入高德地图并使用
1.高德地图使用准备开发之前的准备需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页 ...
vue项目中使用高德地图
1.步骤一:注册并登录高德地图开放平台,申请密钥高德地图开放平台操作步骤如下 2.步骤二:安装高德地图加载器 npm i @amap/amap-jsapi-loader -S 3.在src下创建M ...
vue项目中使用高德地图行政区域聚合功能（script引入方式）
步骤一 :引入高德js资源 <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15& ...
在vue项目中引入高德地图及其UI组件的方法
https://www.jb51.net/article/146789.htm 转载于:https://www.cnblogs.com/sweeeper/p/11282700.html
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...

vue项目中使用高德地图实现添加点标记和获取点击位置信息

vue项目中使用高德地图实现添加点标记和获取点击位置信息相关推荐

最新文章

热门文章