谷歌地图和高德地图JSAPI宝典(Vue2和Vu3通用)

坐标系简介

WGS84:

WGS 84是全球定位系统(GPS)的基准坐标系统,广泛应用于全球定位和导航。它采用十进制度表示经度和纬度。

GCJ02:

中国国家测绘局加密坐标 , 又称为火星坐标系 , 由中国国家测绘局制定的地理坐标系统 , 在中国境内进行定位和地图制作 , 必须使用该坐标。

在中国境内 , 手机获取的 GPS 坐标 , 是 WGS 84 坐标 , 这是准确的坐标 , 但是如果想要显示在地图上的正确位置 , 需要 加入非线性随机偏差中国国家测绘局加密坐标

文档

谷歌文档

文档首页:https://developers.google.com/maps/documentation?hl=zh-cn
JSAPI文档:https://developers.google.com/maps/documentation/javascript?hl=zh-cn
JSAPI示例:https://developers.google.com/maps/documentation/javascript/examples/

高德文档

文档首页:https://lbs.amap.com/api
JSAPI文档:https://lbs.amap.com/api/javascript-api-v2/summary
JSAPI示例:https://lbs.amap.com/demo/list/js-api-v2

安装:

npm install @googlemaps/js-api-loader
npm install @amap/amap-jsapi-loader

代码:

import coordtransform from 'coordtransform'//坐标系转换,高德地图时需要转换经纬度
import { getLanguage} from "@/utils/auth";//根据语言来判断是显示高德地图还是谷歌地图
import { Loader } from '@googlemaps/js-api-loader';
import AMapLoader from "@amap/amap-jsapi-loader";
import point from '@/assets/lockIcon/point.png';
import start from '@/assets/lockIcon/start.png';
import end from '@/assets/lockIcon/end.png';
let map;
let polyline;
let polyEditor;
let markers=[];
let labelsLayer;
let infowindow;
export default {data() {return {isAmap: getLanguage() == "zh",center : getLanguage() == "zh"?[116.397428, 39.90923]:{ lat: 37.7749, lng: 116.397428 },polylineEditable:true,path: [],}},mounted() {this.loadMap();},methods: {/** 构建地图 */async loadGmap (){this.path = [];if(this.isAmap){AMapLoader.reset();await AMapLoader.load({key: 'xxx',version: '2.0',}).then(() => {map = new window.AMap.Map('map-container', {center: this.center,zoom: 15,zooms:[3,20],});map.plugin(['AMap.ToolBar','AMap.Scale','AMap.MapType'],function(){map.addControl(new window.AMap.ToolBar());map.addControl(new window.AMap.Scale());map.addControl(new window.AMap.MapType());});// 添加地图点击事件监听器if(this.isNewVersion()){map.on('click',(e) => {console.log("lat:"+e.lnglat.getLat()+",lng:"+e.lnglat.getLng());// 将点击坐标加入多边形路径if(this.polylineEditable===true){this.path.push([e.lnglat.getLng(), e.lnglat.getLat()]);}this.createLine(this.polylineEditable);console.log('点击地图回调');});}else{window.AMap.event.addListener(map, 'click', (e) => {console.log("lat:"+e.lnglat.getLat()+",lng:"+e.lnglat.getLng());// 将点击坐标加入多边形路径if(this.polylineEditable===true){this.path.push([e.lnglat.getLng(), e.lnglat.getLat()]);}this.createLine(this.polylineEditable);console.log('点击地图回调');});}console.log("加载地图成功");}).catch(e => {console.log("加载地图失败",e);});}else{const loader = new Loader({apiKey: 'xxx',version: 'weekly',language:'en-US',//libraries: ['places'] // 如果需要加载额外的库,比如 'places'});await loader.load().then(() => {map = new google.maps.Map(document.getElementById('map-container'), {center: new google.maps.LatLng(this.center.lat, this.center.lng),zoom: 15,zooms:[3,20],});});map.addListener("click", (event) => {console.log("点击前",this.path)if(this.polylineEditable===true){this.path.push(event.latLng);console.log("点击后",this.path)}this.createLine(this.polylineEditable);console.log('点击地图回调');});console.log("加载地图")}},/** 创建线条 */createLine (editable) {this.clearPolylineByMap();// 创建新的折线if(this.isAmap){polyline = new window.AMap.Polyline({path: this.path,editable: editable,draggable: false,strokeColor: "#009aff",strokeWeight: 3,strokeOpacity: 0.8,});}else{polyline = new google.maps.Polyline({path: this.path,editable: editable,draggable: editable,strokeColor: "#009aff",strokeWeight: 3,strokeOpacity: 0.8,});const googlePath = polyline.getPath();googlePath.addListener('set_at', (event) =>{console.log('Path point updated at index:', event);console.log('Updated path:', googlePath.getArray());let currPath= googlePath.getArray();this.path=[];for (let i = 0; i < currPath.length; i++) {this.path.push(currPath[i]);}console.log("设置",this.path)});googlePath.addListener('insert_at', (event) =>{console.log('Path point inserted at index:', event);console.log('Updated path:', googlePath.getArray());let currPath= googlePath.getArray();this.path=[];for (let i = 0; i < currPath.length; i++) {this.path.push(currPath[i]);}console.log("插入",this.path)});googlePath.addListener('remove_at', (event)=> {console.log('Path point removed at index:', event);console.log('Updated path:', googlePath.getArray());let currPath= googlePath.getArray();this.path=[];for (let i = 0; i < currPath.length; i++) {this.path.push(currPath[i]);}console.log("移除",this.path)});// polyline.addListener("dragend", (event) => {//   let currPath= googlePath.getArray();//   this.path=[];//   for (let i = 0; i < currPath.length; i++) {//     this.path.push(currPath[i]);//   }//   console.log("拖拽",this.path)// });}polyline.setMap(map);if(this.isAmap){//高德地图需要引入PolylineEditor进行编辑if(!editable){return;}map.plugin(['AMap.PolylineEditor'],()=>{polyEditor=new window.AMap.PolylineEditor(map,polyline);polyEditor._selectStyle.strokeColor="#009aff";polyEditor._selectStyle.strokeWeight=3;polyEditor._selectStyle.borderWeight=0;polyEditor.setTarget(polyline);polyEditor.open();// 编辑事件polyEditor.on('addnode',(e)=>{let currPath=polyline.getPath();console.log("添加"+currPath)this.path=[];for (let i = 0; i < currPath.length; i++) {this.path.push([currPath[i].lng, currPath[i].lat]);}});// 编辑事件polyEditor.on('removenode',(e)=>{let currPath=polyline.getPath();console.log("移除"+currPath)this.path=[];for (let i = 0; i < currPath.length; i++) {this.path.push([currPath[i].lng, currPath[i].lat]);}});// 编辑事件polyEditor.on('adjust',(e)=>{let currPath=polyline.getPath();console.log("移动"+currPath)this.path=[];for (let i = 0; i < currPath.length; i++) {this.path.push([currPath[i].lng, currPath[i].lat]);}});});}console.log("创建线条完成");},/** 闭合 */closePolyline () {if (this.path.length < 3) {// this.$modal.msgError(this.$t('area.lt3potion'));return;}// 判断路径是否闭合if (this.path[0]==this.path[this.path.length - 1]) {return;}// 添加最后一个点,使路径闭合this.path.push(this.path[0]);this.createLine(true);},/** 清除 */clearPolylineAndPath (){// 清除之前的折线this.path = [];this.clearPolylineByMap();},clearPolylineByMap(){// 移除折线if (polyline) {polyline.setMap(null);}if (polyEditor) {polyEditor.setTarget(null);polyEditor.close();}},/** 根据后台接口经纬度数据显示线条在地图上 */showPolyline (val,editable) {if (val == null || val == "") {return}this.saveId = val.id;if (val.detail == null || val.detail == "" ||!Array.isArray(val.detail) || val.detail.length==0) {return}this.polylineEditable=editable;// 清除之前的折线this.clearPolylineAndPath();// currAreaColor=val.color;let latLngs = [];for (let i = 0; i < val.detail.length; i++) {if(this.isAmap){let gcj02=coordtransform.wgs84togcj02(val.detail[i].lng, val.detail[i].lat);//将坐标系转成高德坐标系latLngs.push({lng:gcj02[0],lat:gcj02[1]});}else{latLngs.push(val.detail[i]);}}for (let i = 0; i < latLngs.length; i++) {if(this.isAmap){this.path.push([latLngs[i].lng, latLngs[i].lat]);}else{this.path.push(new google.maps.LatLng(latLngs[i].lat, latLngs[i].lng))}}this.createLine(editable);this.showMarker(latLngs);if(this.isAmap){map.setFitView();//根据图形自适应缩放级别}else{if(this.path.length>0){var bounds = new google.maps.LatLngBounds();      //声明一个boundsfor(let i=0;i<latLngs.length;i++){bounds.extend(new google.maps.LatLng(latLngs[i].lat, latLngs[i].lng));}map.fitBounds(bounds);//根据图形自适应缩放级别}}},/** 将地图上线条的经纬度数据保存到数据库 */savePolyline() {this.closePolyline();let reqPath = [];//转换数据for (let i = 0; i < this.path.length; i++) {if (this.isAmap) {reqPath.push({lng: this.path[i][0],lat: this.path[i][1]});} else {reqPath.push({lat: this.path[i].lat(),lng: this.path[i].lng()});}}if(reqPath.length<=0){return;}let latLngs= [];for (let i = 0; i < reqPath.length; i++) {if(this.isAmap){let wgs84 = coordtransform.gcj02towgs84(reqPath[i].lng, reqPath[i].lat);//将坐标系还原成GPS通用坐标系latLngs.push({lng: wgs84[0],lat: wgs84[1]});}else{latLngs.push(reqPath[i]);}}updateLatLngs({id:1,latLngs:latLngs}).then(() => {this.$modal.msgSuccess(this.$t('common.updateSuccess'));this.getList();}).finally(() => {this.buttonLoading = false;});},showMarker(data) {if(this.isAmap){console.log("加载点:"+data.length);if (markers && markers.length > 0) {labelsLayer.remove(markers);markers = []}if (data && data.length > 0) {const icon = {type: 'image', // 图标类型,现阶段只支持 image 类型image: point, // 图片 urlsize: [25, 25], // 图片尺寸anchor: 'center' // 图片相对 position 的锚点,默认为 bottom-center};for (let i = 0; i < data.length; i++) {if (data[i].lng && data[i].lat && !(data[i].lng == 0 && data[i].lat == 0)) {data[i].num = i + 1;let marker = new window.AMap.LabelMarker({position: [data[i].lng, data[i].lat],icon: icon,data: data[i],zIndex: 101});marker.on('click', this.markerClick);markers.push(marker);}}// console.log(markers);if (data.length >= 2) {const iconStart = {type: 'image', // 图标类型,现阶段只支持 image 类型image: start, // 图片 urlsize: [30, 33], // 图片尺寸offset: [0, -16.5],anchor: 'center' // 图片相对 position 的锚点,默认为 bottom-center};const iconEnd = {type: 'image', // 图标类型,现阶段只支持 image 类型image: end, // 图片 urloffset: [0, -16.5],size: [30, 33], // 图片尺寸anchor: 'center' // 图片相对 position 的锚点,默认为 bottom-center};let markerStart = new window.AMap.LabelMarker({position: [data[0].lng, data[0].lat],//position:[route.query.startLng,route.query.startLat],icon: iconStart,data: data[0],zIndex: 102});let markerEnd = new window.AMap.LabelMarker({position: [data[data.length - 1].lng, data[data.length - 1].lat],//position:[route.query.endLng,route.query.endLat],icon: iconEnd,data: data[data.length - 1],zIndex: 103});markerStart.on('click', this.markerClick);markerEnd.on('click', this.markerClick);markers.push(markerStart);markers.push(markerEnd);}labelsLayer.add(markers);}}else{if (markers && markers.length > 0) {map.remove(markers);}for (let i = 0; i < data.length; i++) {if (data[i].lng && data[i].lat && !(data[i].lng == 0 && data[i].lat == 0)) {data[i].num = i + 1let marker = new google.maps.Marker({position: {lat: data[i].lat, lng: data[i].lng},icon: {url: point,size: new google.maps.Size(28, 28),anchor: new google.maps.Point(14, 14)},zIndex: 101,map: map});markers.push(marker);google.maps.event.addListener(marker, 'click', () => {this.markerClick(null,marker, data[i])});}}if (data.length >= 2) {let markerStart = new google.maps.Marker({position: {lat: data[0].lat, lng: data[0].lng},icon: {url: start,size: new google.maps.Size(60, 66),scaledSize: new google.maps.Size(30, 33),anchor: new google.maps.Point(15, 16.5)},zIndex: 102,map: map});let markerEnd = new google.maps.Marker({position: {lat: data[data.length - 1].lat, lng: data[data.length - 1].lng},icon: {url: end,size: new google.maps.Size(60, 66),scaledSize: new google.maps.Size(30, 33),anchor: new google.maps.Point(15, 16.5)},zIndex: 103,map: map});google.maps.event.addListener(markerStart, 'click', () => {this.markerClick(null,markerStart, data[0])});google.maps.event.addListener(markerEnd, 'click', () => {this.markerClick(null,markerEnd, data[data.length - 1])});markers.push(markerStart);markers.push(markerEnd);}}},async markerClick (e,marker, data){if(this.isAmap){data = e.target._originOpts.data;}let template =`<div style='font-size: 15px'><p style='margin-left: 10px'>No.` + data.num + `</p> <p style='margin-left: 10px'>` + this.$t('map.longitude') + `:` + data.lng + `</p><p style='margin-left: 10px'>` + this.$t('map.latitude') + `:` + data.lat + `</p><p style='margin-left: 10px'>` + this.$t('map.gps_time') + `:` + this.parseTime(data.positionTime, '{y}/{m}/{d} {h}:{i}:{s}') + `</p></div>`;if(this.isAmap){infowindow  = new window.AMap.InfoWindow({content: template});infowindow .open(map, e.lnglat);}else{infowindow.setContent(template);infowindow.open(map, marker);}},}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466836.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【国内中间件厂商排名及四大中间件对比分析】

国内中间件厂商排名 随着新兴技术的涌入&#xff0c;一批国产中间件厂商破土而出&#xff0c;并在短时间内迅速发展&#xff0c;我国中间件市场迎来洗牌&#xff0c;根据市占率&#xff0c;当前我国中间件厂商排名依次为&#xff1a;东方通、宝兰德、中创股份、金蝶天燕、普元…

Java 源码中的 Unicode 逃逸问题,别被注释给骗了

背景 看了一段项目源码&#xff0c;定义了一个 List 对象&#xff0c;往该列表对象 add 的代码前面有注释符号&#xff0c;但是程序运行时列表中却存在对象&#xff0c;为什么呢&#xff1f;仔细看了一下&#xff0c;注释符号和 add 代码之间有一个特殊符号 \u000d&#xff0c…

基于IM场景下的Wasm初探:提升Web应用性能|得物技术

一、何为Wasm &#xff1f; Wasm&#xff0c;全称 WebAssembly&#xff0c;官网描述是一种用于基于堆栈的虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标&#xff0c;用于编译C/C/Rust等高级语言&#xff0c;支持在Web上部署客户端和服务器应用程序。 Wasm 的开发者参…

基于百度飞桨paddle的paddlepaddle2.4.2等系列项目的运行

PPASR 必看&#xff01;&#xff01;&#xff01; PaddleSpeech develop --> PaddlePaddle 2.5.0/2.5.1 PaddleSpeech < 1.4.1 --> PaddlePaddle < 2.4.2 1.创建虚拟环境 conda create --name test python3.10 2.激活环境&#xff0c;安装ppasr的paddlepaddl…

2024MoonBit全球编程创新挑战赛参赛作品“飞翔的小鸟”技术开发指南

本文转载自 CSDN&#xff1a;https://blog.csdn.net/m0_61243965/article/details/143510089作者&#xff1a;言程序plus 实战开发基于moonbit和wasm4的飞翔的小鸟游戏 游戏中&#xff0c;玩家需要通过上下左右按键控制Bird&#xff0c;在不断移动的障碍pipe之间穿梭&#xf…

浅谈Agent

目录 什么是大模型 Agent &#xff1f; 大模型Agent 有哪些部分组成? 规划&#xff08;Planning&#xff09; Planning类型 不依赖反馈的计划 基于反馈的计划 拆解子目标和任务分解方法 COT TOT GOT LLMP 反思和完善 ReAct(融合推理与执行的能力) Reflexion(动态…

文本转SQL(Text-to-SQL),场景介绍与 Spring AI 实现

在众多的 AI 大模型的应用场景中&#xff0c;Text-to-SQL&#xff0c;也就是文本转 SQL&#xff0c;是其中实用性很高的一个。Text-to-SQL 充分利用了大模型的优势&#xff0c;把用户提供的自然语言描述转换成 SQL 语句&#xff0c;还可以执行生成的 SQL 语句&#xff0c;再把查…

DICOM标准:深入详解DICOM医学影像中的传输语法

引言 DICOM&#xff08;数字成像和通信医学&#xff09;标准在医学影像数据交换中扮演着至关重要的角色。其中&#xff0c;*传输语法&#xff08;Transfer Syntax&#xff09;是DICOM标准中定义数据编码和传输方式的核心部分。理解传输语法对于确保不同设备和系统之间的互操作性…

如何提高谷歌收录速度?

相信很多做外贸推广的朋友都遇到过这种情况&#xff1a;网站上线了&#xff0c;但新页面迟迟不被谷歌收录。即使你的内容很优秀&#xff0c;设计也很精美&#xff0c;如果谷歌爬虫抓不到页面&#xff0c;一切努力就白费了。这时候&#xff0c;GSI谷歌快速收录服务就成了“救命稻…

Spring面向切面编程

目录 1.AOP概述及Spring AOP实现原理 AOP概述 AOP的应用场景 AOP的作用 Spring AOP概述 Spring AOP的实现原理 Spring AOP中Advice的分类 2. 通过xml配置实现AOP 实现步骤&#xff1a; 新增模块&#xff1a; 导入相关依赖&#xff1a; 新增实体类User 新增业务类UserS…

Notepad++ 更改字体大小和颜色

前言 在长时间编程或文本编辑过程中&#xff0c;合适的字体大小和颜色可以显著提高工作效率和减少眼睛疲劳。Notepad 提供了丰富的自定义选项&#xff0c;让你可以根据个人喜好调整编辑器的外观。 步骤详解 1. 更改字体大小 打开 Notepad 启动 Notepad 编辑器。 进入设置菜…

香港航空 阿里滑块 acw_sc__v3 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我删…

Unet++改进3:添加NAMAttention注意力机制

本文内容:添加NAMAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 识别不太显著的特征是模型压缩的关键。然而,它在革命性的注意机制中尚未得到研究。在这项工作中,我们提出了一种新的基于归一化的注意力模块(NAM),它抑制了较不显著…

WPF+MVVM案例实战(二十二)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

汽车广告常见特效处理有哪些?

​汽车广告作为展示汽车性能和外观的重要媒介&#xff0c;常常需要借助特效来增强视觉效果&#xff0c;吸引观众的注意力。以下是一篇关于汽车广告中常见特效处理的文章。 在竞争激烈的汽车市场中&#xff0c;广告不仅是推广产品的工具&#xff0c;更是艺术和科技的结合。特效技…

【CUDA】线程配置

一、 线程层次结构 1.1 认识 GPU 可并行执行工作 Thread&#xff1a;所有线程执行相同的核函数&#xff0c;并行执行 Thread Block&#xff1a;执行在一个Streaming Multiprocessor (SM)&#xff0c;同一个Block中的线程可以协作 线程的集合称为块&#xff0c;块的数量很多…

爬虫-------字体反爬

目录 一、了解什么是字体加密 二. 定位字体位置 三. python处理字体 1. 工具库 2. 字体读取 3. 处理字体 案例1&#xff1a;起点 案例2&#xff1a;字符偏移&#xff1a; 5请求数据 - 发现偏移量 5.4 多套字体替换 套用模板 版本1 版本2 四.项目实战 1. 采集目…

transformer模型写诗词

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

【计算机网络】章节 知识点总结

一、计算机网络概述 1. 计算机网络向用户提供的两个最重要的功能&#xff1a;连通性、共享 2. 因特网发展的三个阶段&#xff1a; 第一阶段&#xff1a;从单个网络 ARPANET 向互联网发展的过程。1983 年 TCP/IP 协议成为 ARPANET 上的标准协议。第二阶段&#xff1a;建成三级…

【微服务】不同微服务之间用户信息的获取和传递方案

如何才能在每个微服务中都拿到用户信息&#xff1f;如何在微服务之间传递用户信息&#xff1f; 文章目录 概述利用微服务网关做登录校验网关转微服务获取用户信息openFeign传递微服务之间的用户信息 概述 要在每个微服务中获取用户信息&#xff0c;可以采用以下几种方法&#…