技术点：使用vue和element实现地图选点功能

使用vue+element+腾讯地图组件实现地图选点功能

效果：

选点

完整代码

<template><div id="app"><el-button @click="openMapPickPop">选点</el-button><div><b>经度：</b><b>{{ currentPicked?.latlng.lat }}</b></div><div><b>纬度：</b><b>{{ currentPicked?.latlng.lng }}</b></div><div><b>城市：</b><b>{{ currentPicked?.cityname }}</b></div><div><b>位置信息：</b><b>{{ currentPicked?.poiaddress }}{{ currentPicked?.poiname }}</b></div></div>
</template><script setup>import { ref, reactive, computed, watch, onMounted } from "vue";import { ElMessageBox } from "element-plus";const mapApiKey = "UU2BZ-B6RKG-QCTQW-IA6XO-5NHSH-Q6BYM";const IFRAME_HTML = `<iframe id="mapPage" width="600" height="400" frameborder="0"src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${mapApiKey}&referer=myapp"></iframe>`;const currentPicked = ref({latlng: {},});function openMapPickPop($event) {if ($event.relatedTarget) return;ElMessageBox({title: "选择地址",message: IFRAME_HTML,customClass: "location-picker-box",dangerouslyUseHTMLString: true,closeOnPressEscape: false,}).then(() => {window.removeEventListener("message", handleMapPickedMessage, false);console.log("选择了地图", currentPicked.value);}).catch(e => {if (e != "cancel") throw e;window.removeEventListener("message", handleMapPickedMessage, false);});window.addEventListener("message", handleMapPickedMessage, false);}function handleMapPickedMessage(event) {/*** 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息*/let loc = event.data;// 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'if (loc && loc.module != "locationPicker") return;currentPicked.value = loc;// console.log(" currentPicked.value ", currentPicked.value );}
</script><style>html .location-picker-box {width: auto;max-width: none;}
</style>

实现步骤

步骤一：拿到腾讯地图组件的iframe

去腾讯地图申请账号，拿到自己的key，否则无法调用腾讯地图的组件
腾讯地图组件示例地址

拿到这个iframe

注意：key需要注册账号·自己去申请，拿到唯一的key之后腾讯才知道是谁调用的这个组件，然后计次

  const mapApiKey = "UU2BZ-B6RKG-QCTQW-IA6XO-5NHSH-Q6BYM";const IFRAME_HTML = `<iframe id="mapPage" width="600" height="400" frameborder="0"src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${mapApiKey}&referer=myapp"></iframe>`;

步骤二：在用户点击时调用方法，该方法内调出腾讯的iframe

用别的方法也行，此处是使用了el-element的this.$msgBox，如果使用的其他组件库你也可以使用其他的

  function openMapPickPop($event) {if ($event.relatedTarget) return;ElMessageBox({title: "选择地址",message: IFRAME_HTML,customClass: "location-picker-box",dangerouslyUseHTMLString: true,closeOnPressEscape: false,}).then(() => {window.removeEventListener("message", handleMapPickedMessage, false);console.log("选择了地图", currentPicked.value);}).catch(e => {if (e != "cancel") throw e;window.removeEventListener("message", handleMapPickedMessage, false);});window.addEventListener("message", handleMapPickedMessage, false);}

步骤三：用户选点后，通过页面通信将选中的值传给页面内的变量

  function handleMapPickedMessage(event) {/*** 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息*/let loc = event.data;// 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'if (loc && loc.module != "locationPicker") return;currentPicked.value = loc;// console.log(" currentPicked.value ", currentPicked.value );}

完成拉！！！！

技术点：使用vue和element实现地图选点功能相关推荐

微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
vue使用谷歌地图绘制图形以及地图选点功能
因做加拿大配送项目得用到谷歌地图效果图: 第一步: 首先访问谷歌地图以及文档需要加速插件你得在谷歌浏览器扩展程序里添加一个加速插件(如图): 最好充值vip,不然免费的加速通道不稳定本人是在vu ...
uni-app中使用腾讯位置服务实现小程序地图选点功能
文章目录 1. 官方文档 2. 小程序添加插件 3. HBuilder配置 4. 配置代码 5. 页面代码 1. 官方文档技术选定(地图选点插件) (对应官网:https://lbs.qq.com/ ...
微信小程序获取当前位置及地图选点功能
标题小程序获取当前位置----逆地址解析----地图选点实现功能:小程序首页定位当前城市类似于某宝: 某团: 获取当前位置: 在小程序首页创建getLocation函数并在onLoad调用首先需 ...
ArcGIS API+Canvas +Vue框架制作前端地图打印功能
将ArcGIS Pro 桌面打印制图功能搬到前端页面上实现BS端打印制图功能简介地图框冲突拖拽放大缩小标题图例图例储存图例获取图例摆放比例尺 scale属性格式化指北针预 ...
uniapp地图选点功能
<template><view><view class="" style="height: 500rpx;"></vi ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线发布于 1月9日一.需求场景所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...

技术点：使用vue和element实现地图选点功能

使用vue+element+腾讯地图组件实现地图选点功能

完整代码

实现步骤

步骤一：拿到腾讯地图组件的iframe

步骤二：在用户点击时调用方法，该方法内调出腾讯的iframe

步骤三：用户选点后，通过页面通信将选中的值传给页面内的变量

技术点：使用vue和element实现地图选点功能相关推荐

最新文章

热门文章