Openlayers + Vue 疑难杂症（三）谷歌地图调用及其坐标偏移

最新推荐文章于 2024-08-16 10:13:50 发布

北冥有鲲跃龙门

最新推荐文章于 2024-08-16 10:13:50 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_43155640/article/details/109184816

版权

本文详细介绍了在OpenLayers中调用Google Maps API时遇到的坐标偏移问题，分析了原因并提供了解决方案。通过调整URL参数，解决了地图显示的坐标不准确问题。同时，分享了无标注和有标注的Google Maps URL供参考。

摘要由CSDN通过智能技术生成

系列文章目录

Openlayers + Vue 疑难杂症（一）地图构建与容器监听
Openlayers + Vue 疑难杂症（二）Vue项目打包与tomcat部署

文章目录

系列文章目录
前言
一、Google map URL
二、核心代码
三、遇到的问题
总结

前言

本文章主要介绍了openlayers 调用google map在线资源的方法，作者在此过程中遇到的坐标偏移现象。

一、Google map URL

起初作者在网上找到的有三个地址：
① http://mt1.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G*；
②

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

北冥有鲲跃龙门

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

openlayers：实现加载谷歌地图（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

02-06

284

openlayers：实现加载谷歌地图（附完整源码）

Openlayers实战：加载google地图

大剑师兰特的GIS世界

07-13

519

google地图在业界一直是标杆的存在，其zoomlevel超级大，可看到非常精细的程度。Openlayers中如何加载谷歌地图呢？同样是XYZ的挂载方式，根据参数的不同，可以显示不同状态的谷歌地图，如果矢量地图，瓦片遥感图片等。

参与评论您还未登录，请先登录后发表或查看评论

Openlayers中Google地图的加载

weixin_30325793的博客

03-25

221

概述：本文讲述如何在Openlayers中加载Google的切片。效果：矢量图影像图实现：在实现的时候，参考了mygisforum的文章http://blog.csdn.net/mygisforum/article/details/7582449的内容，同时结合gwc的gridset，实现了google切片在Openlayers2中的调用与展示。1、扩展的GoogleLayer代码如下：Ope...

【Openlayers】常用API整理

最新发布

weixin_43180565的博客

08-16

934

组定义映射中可用的图层组，用来盛放地图上的各种元素，其在地图上的显示顺序是按照数组中元素序列从下到上呈现的，可以直接在创建地图时定义图层，多个图层的时候可以单独定义。与控件不同的是，它们不在屏幕上的固定位置，而是绑定到地理坐标上，因此平移地图将移动。投影，投影决定了中心的坐标系，其单位决定了分辨率的单位(每个像素的投影单位)。检查两个投影是否相同，即一个投影中的每个坐标确实表示另一个投影中的相同地理点。将坐标从源投影转换为目标投影，这将返回一个新的坐标(并且不修改原始坐标)。注册不改变坐标的转换函数。

openlayers之加载谷歌地图

weixin_30265171的博客

02-07

457

之前项目中一直使用高德地图作为底图，但高德地图影像图只限于城市地区，所以决定替换为谷歌地图。其实一直以为谷歌地图不能访问，不知道有没有像我一样懒的小伙伴…… 加载谷歌地图的地址总结如下：谷歌交通地图地址：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!...

Openlayers之加载谷歌地图

hsany330的专栏

03-19

980

1、谷歌地图瓦片构成我们用浏览器打开谷歌地图，然后按下F12键，查看网络资源中的地图瓦片，可以发现瓦片URL中变化的部分为1i、2i和3i后面的数字，经过分析可以知道1i后面的应该是瓦片的级别，2i后面的应该是瓦片的行号，3i后面的应该是瓦片的列号，所以最终得到其通用URL为：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!...

vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图

weixin_39835792的博客

01-14

1152

vue中使用OpenLayers(一)：引入谷歌地图第一步npm install olpackage.json 中可以看到第二步引入import "ol/ol.css";import Map from "ol/Map";import Feature from "ol/Feature";import View from "ol/View";import XYZ from "ol/source/X...

Openlayers 内网离线地图标注点与实际位置偏差处理方法

m0_56133924的博客

12-07

613

内网地图标注点与实际位置偏移，需到标注点左上方向才能触发点击事件或触发事件

vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)

xiaoping_1988的博客

06-13

8370

vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html vue加载百度地图及绘制工具 ...

Openlayers Projection导致经纬度颠倒问题

guzicheng1990的博客

11-14

3041

问题： openlayers3调用TileWMS接口，实现Openlayers加载Geoserver转发的ArcGIS切片时，web墨卡托（wkid3857）没有问题，但是WGS84（wkid4326）就不行。问题排查： 1、查看控制台，发现报错400，这个是由于格式错误引起的 2、于是我把链接复制出来粘贴到浏览器观察，发现是BBOX的经纬度反了。 &BBOX=39....

用Openlayers实现实时定位

01-19

小马看Gis--用Openlayers实现实时定位服务端服务方法用来生成GeoJSon串的jar包的源文件。

vue-amap搜索定位，多边形遮罩，自定义点坐标, 获取天气

qq_44832960的博客

10-25

848

main.js里面配置可以根据自己的样式进行修改 <template> <div class="map_address"> <div class="address-wrapper" :style="{width:'100%',height:'100%'}"> <div style="display:flex;align-items: center;"> <el-amap-search-box

openlayers 6【二】Map地图详解，初始化一个map地图

weixin_46275063的博客

05-27

414

官方文档：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html 地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。 controls:：最初添加到地图的控件。如果未指定， module:ol/control~defaults则使用。 layers：图层。如果未定义，则将渲染没有图层的地图。请注意，层是按提供的顺序渲染的，因此，例如

vue使用高德地图覆盖物（多边形），以及对多边形的操作

唯独是你的博客

02-20

8740

高德地图覆盖物（多边形）涉及内容：地图的加载，点坐标的生成... HTML部分 <div v-if="isElectronicFenceOfShop">  <div id="container2" style="width:80%;height:500px;margin-left:100...

vue openlayers 加载高德地图等 gcj02 的图层偏移问题

大家好，我是+V

08-26

4270

首先哈，遇到这个问题是肯定的，因为 openlayers 是使用的标准坐标系，但是像是高德地图或者是谷歌地图他们在国内都是使用的偏移坐标，所以说直接不处理放上去就会出问题，看到坐标有一公里左右的偏差。通过上面两种方式都可以实现 GPS 坐标和高德底图匹配，但是第一种有瑕疵，但是如果只用高德，不会切换其他类型的地图的时候可以使用，如果需要切换，建议使用方法二，这样的话给人的效果会舒服一点。.........

VUE-amap遇到的坑和总结

weixin_45432736的博客

12-12

8293

和公司前辈做的第一个项目，我们都没有使用过vue-amap，期间遇到了各种问题，上网搜索发现有些方案不满足需求，或者根本没有对应的解决方案，又或是有些地方有些坑。项目接近尾声，想写个博客一来总结经验，二来希望能给其他通过vue-amap做项目的人提供一些帮助，毕竟当初自己也是疯狂上百度搜索资料来解决问题。东西比较零碎，第一次写博客，不足之处望海涵。

VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框圆形等自定义图案

Aa12364567的博客

08-12

1871

VUE地图基础操作：放大、缩小、测距、测面、复位、切换地图底图，清除作图痕迹，画矩形框图案。

openlayers+vue

07-30

接下来，你可以在Vue组件中使用OpenLayers的地图组件。例如，在你的template中添加一个地图容器和一些控件： ```html <v-view :options="viewOptions"></v-view> <v-layer-tile :options="layerOptions"></v...