vue项目接入高德地图点击地图获取经纬度及省市区

准备工作，可以先看官方的介绍，JSAPI结合Vue使用，这个不需要在main.js中引入
index.html中

//如果只需要获取经纬度可以跳过这步，经纬度逆解析为详细地址时需要配置这个
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'XXX', //所申请的安全密钥 注意这是安全密钥而不是key}
</script>

index.vue的html部分

//我是封装在antd的弹窗组件中
<template><a-modal title="选择区域" :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="提交" cancelText="取消"><div id="container"></div><div class="toolbar">当前坐标: {{ point[0] }}, {{ point[1] }}<br />地址: {{ address }}</div></a-modal>
</template>

index.vue的script部分

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {name: 'MapDialog',data() {return {visible: false, //弹窗显隐center: [115.97539, 28.715532], //地图中心点point: [], //经纬度-lng latmap: null, //地图实例marker: null, //地图icongeocoder: null, //逆解析实例address: null //地址}},methods: {// 打开弹窗open({ point, address }) {// 如果父组件携带了参数 赋值做回显if (point && address) {this.address = addressthis.point = pointthis.center = point}// 打开弹窗this.visible = true//地图初始化this.initMap()},//DOM初始化完成进行地图初始化initMap() {AMapLoader.load({key: 'XXX', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.Geocoder', // 逆向地理解码插件'AMap.Marker' // 点标记插件] // 需要使用的的插件列表}).then(AMap => {this.map = new AMap.Map('container', {//设置地图容器idzoom: 12, //初始化地图级别center: this.center //初始化地图中心点位置})// 如果父组件传入了有效值 回显一个iconif (this.point.length > 0) {this.addMarker()}//监听用户的点击事件this.map.on('click', e => {let lng = e.lnglat.lnglet lat = e.lnglat.latthis.point = [lng, lat]// 增加点标记this.addMarker()// 获取地址this.getAddress()})}).catch(e => {console.log(e)})},// 增加点标记addMarker() {// 清除其他iconif (this.marker) {this.marker.setMap(null)this.marker = null}// 重新渲染iconthis.marker = new AMap.Marker({icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',position: this.point, //icon经纬度offset: new AMap.Pixel(-13, -30) //icon中心点的偏移量})this.marker.setMap(this.map) //设置icon},// 将经纬度转换为地址getAddress() {const self = this// 这里通过高德 SDK 完成。this.geocoder = new AMap.Geocoder({city: '全国', //地理编码时，设置地址描述所在城市; 默认全国; 可选值：城市名（中文或中文全拼）、citycode、adcoderadius: 1000, //逆地理编码时，以给定坐标为中心点; 默认1000; 取值范围(0-3000)extensions: 'all' //逆地理编码时，返回信息的详略; 默认值：base，返回基本地址信息; 默认值：base，返回基本地址信息})//调用逆解析方法 个人开发者调用量上限5000（次/日）this.geocoder.getAddress(this.point, function(status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {// this指向改变self.address = result.regeocode.formattedAddress}}})},// 提交回调handleOk() {this.$emit('callback', { point: this.point, address: this.address })this.map = nullthis.marker = nullthis.visible = false},// 取消回调handleCancel() {this.map = nullthis.marker = nullthis.visible = false}}
}
</script>

index.vue的css部分

<style lang="less" scoped>
/deep/ .ant-modal {width: 100vw !important;max-width: 100vw !important;top: 0;padding-bottom: 0;.ant-modal-body {height: calc(100vh - 55px - 53px);overflow-y: auto;padding: 0;.search-box {width: 100%;height: 150px;}#container {padding: 0px;margin: 0px;width: 100%;height: 100%;.amap-icon img,.amap-marker-content img {width: 25px;height: 34px;}}.toolbar {position: absolute;bottom: 50px;left: 0;width: 100%;height: 100px;background-color: #fff;font-size: 20px;text-align: center;line-height: 50px;}}
}
</style>

页面效果

逆解析经纬度得到的详细地址

vue项目接入高德地图点击地图获取经纬度及省市区相关推荐

vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
高德地图的简单使用：点击标记获取经纬度和详细地址
准备工作 1. 先进入高德开发平台注册登录 2.进入地图 js Api 按照步骤申请key 3 使用npm安装依赖包 npm i @amap/amap-jsapi-loader --save 4. 高 ...
vue项目接入腾讯im
vue项目接入腾讯im 查看文档先安装SDK依赖在项目脚本里引入模块添加监听事件用户登录发送消息查看文档首先贴上文档地址 https://cloud.tencent.com/docume ...
百度地图点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图
百度地图点击地图类型控件切换普通地图.卫星图.三维图.混合图(卫星图+路网),右下角是缩略图 <!DOCTYPE html> <html> <head> < ...
接入高德开放平台实现地址转换为经纬度坐标
高德地图API 1 地址转为经纬度后台人员填写完房源详情地址后,由此地址转为,电子地图中的经纬度.从而方便日后前台在电子地图中的标识显示. 高德地图开放平台:https://lbs.amap.co ...
前端web用腾讯地图api根据地址获取经纬度
需求:使用腾讯地图,通过输入的地址获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调 ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...

vue项目接入高德地图点击地图获取经纬度及省市区

vue项目接入高德地图点击地图获取经纬度及省市区相关推荐

最新文章

热门文章