谷歌地图 new AMap.Marker 创建标记点缩放后位置偏移解决方案

最新推荐文章于 2024-05-29 16:53:04 发布

原创

最新推荐文章于 2024-05-29 16:53:04 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种在使用高德地图API创建标记点时解决缩放后位置偏移的方法。通过设置偏移量属性，确保图标即使在地图缩放过程中也能保持在正确的地理位置上。

谷歌地图 new AMap.Marker 创建标记点缩放后位置偏移解决方案

按照高德地图的api，创建Marker(图标)并将其放置到地图上，代码如下：

//创建一个Marker图标
 var marker = new AMap.Marker({
   
   
 		//设置经纬度
        position : [121.499809,31.239666],
        //设置偏移量
        offset:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

OOObject

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

高德地图自定义 Marker：点击 & 悬停显示信息框InfoWindow实战（Vue + AMap 2.0）

专注于前端开发与实战技巧,记录从零到一的学习与项目经验。分享 Vue3 / JavaScript / TypeScript / Flutter /Uniapp等前端技术，以及性能优化、工程化、最佳实践。

09-13

881

在前端地图应用中，点击或悬停标记点（Marker）并弹出信息框（InfoWindow）是很常见的交互需求。本文将结合 Vue 与高德地图（AMap），讲解如何给自定义 Marker 添加点击与悬停事件，并显示定制的提示框。适用于想要增强地图应用交互体验的读者。📌 如果你正在开发一个车辆监控、商户分布、物流调度等地图应用，这篇文章会很有参考价值。本文展示了如何在 Vue + 高德地图 2.0 使用自定义 Marker，并在鼠标悬停和点击时显示信息窗口。

【高德地图】缩放后marker偏移，怎样移到准确位置

牛哞哞杂记

08-22

1万+

背景描述：最近使用高德地图，做数据展示功能。用到海量点，可以查看这里类似下图的效果：遇到的问题：因为将标点改成了自定义的图标，就发现标点的位置偏移了，比如，本来这个标点应该在“三亚”，但是显示在地图上时，却到了海里，放大缩小地图时，感觉标点位置也会变。原因：查看高德API可知，通过设置 offset 来添加偏移量，当偏移量为 (0, 0) 时，自定义图标默认以左上角为基准点。而造成在地图上缩放，标点位置会偏差就是偏移量设置有误造成的。我需要将标点中心位置设置在底部中间（下图黄点位置），所以

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

vue使用高德地图后坐标偏移问题

weixin_45693257的博客

09-09

9419

前言：因为项目有多个版本，有app端及H5端，app端定位地理信息是用手机GPS获取，而H5端定位地理信息是用高德地图获取，但是发现高德地图获取的坐标系有偏移~ 一、使用高德地图： // 获取当前定位 AMap.plugin('AMap.Geolocation', function() { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，.

高德地图自定义标记点marker缩放偏移问题

jwq

04-24

4877

原因：造成这种现象的原因其实是对标记点的偏移量offset属性理解不准确导致，查阅官方文档得知，offset默认值是[0,0]，就是定位中心点是在图标的左上角，带着此种思维再去看刚才的效果就可以发现，其实是没有偏移的，只是图标定位点在底部，缩放时造成的视觉上错觉，我们可以看到，如果把视觉焦点聚焦在左上角[0,0]的位置，其实定位一直是准确的。为了符合图标底部是实际定位点的效果，可以看到图标大小是35*38，基于左上角原点，x轴偏移半个宽度，y轴偏移整个高度即可，即offset: [-17.5, -38]

两行代码轻松解决高德地图marker在地图缩放的时候会偏移的问题

qq_64436918的博客

02-06

1547

解决高度地图marker偏移的问题

react new AMap()绑定鼠标事件

花开富贵的博客

07-22

1258

我的需求只这样的，当我每点击一条数据时，需要每次重新渲染地图上的点，并且点上有鼠标事件（移上查看详情，点击查看轨迹）点的创建使用了new AMap.Marker()的方式(当然for循环标签应该也可以)， //点的创建 let newMarker=new window.AMap.Marker({ //用window.出来是因为react-amap对react页面融合不是很友好，有时候会报错...

高德地图缩放marker位置变化，及设置offset偏移

mrsun_web

10-15

9054

一些朋友在往地图上添加标注的时候，往往会发现，图片的尖尖角对不上具体的点。比如，我要在上海东方明珠上扎一个点。 var marker = new AMap.Marker({ //添加自定义点标记 map: map, position: [121.499809,31.239666], //基点位置 offset: new AMap.Pixel(0, 0), //相对于基点的偏移位置 draggable: true, //是否可拖动

高德地图JS API 普通点标记Marker

weixin_45511682的博客

05-29

1915

AMap.Marker 是高德地图提供的用于在地图上添加点标记的类。通过Marker，开发者可以在地图上放置自定义的图标或默认的标记点，并设置其位置、样式、事件等属性。

var marker = new AMap.Marker({ position: [116.405467, 39.907761], icon: new AMap.Icon({ size: new AMap.Size(40, 50), //图标的大小 image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", imageOffset: new AMap.Pixel(0, -60) }) })

热门推荐

赵峰的专栏

09-19

4万+

示例代码部分：<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=d

高德地图-----点标记

qq_40881695的博客

04-30

518

准备工作在public中的index.html中初始化地图 <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 在 .eslintrc.js 中配置AMap和AMapUI globals: { "AMap": "true", "AMapUI":"true", } 实现思路封装一个全局组件scottMap.vue，用于加载地图封装一个基于sc

高德地图开发（三、地图marker点标记）

weixin_44849078的博客

09-07

8201

高德地图添加marker标记以及自定义样式标记

高德地图纠偏 php,高德地图开发中,缩放后Marker偏移的问题

weixin_35663823的博客

04-10

846

最近在做地图开发，遇到一个小坑，记录在这里。按照高德地图的文档，初始化Marker(图标)并将其放置到地图上，示例如下：var marker = new AMap.Marker({icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",position: [120.1, 30.1]});本以为就可以这样简简单...

高德地图点标记随着地图放大缩小位置改变的解决办法

weixin_43791884的博客

01-13

3155

高德地图点标记随着地图放大缩小位置改变的解决办法

[demo] 高德地图用户位置动态移动

郭栋的专栏

12-05

1843

高德地图用户位置动态移动 BG 最近帮朋友做做项目，一个打车app,我帮忙管理后台做个查看司机实时位置的页面，本着cv大法好的原则，东看看文档，西瞅瞅别人的demo，然后就整出来这么一个简单的小demo 功能主要功能就是从后台获取到司机的基本信息，根据其中的坐标信息展示到地图中，然后定时刷新司机信息，然后根据最新的坐标信息，对应的图标作出相应的移动。代码里原本有轨迹显示，不过效果不理想就注掉了，有哪位大佬对Polyline熟可以补充下，由于自定义的点标记，图标中心在头像上，所..

高德地图Amap开发实践

hoaxxcj的博客

03-30

3740

一、简介：高德开放平台是国内技术领先的LBS（Location Based Services，基于位置的服务）服务提供商，拥有先进的数据融合技术和海量的数据处理能力。高德开放平台向广大开发者提供覆盖移动端和Web端的开发工具，开发者通过调用开发包或接口即可在应用或网页中实现地图显示、标注、位置检索等功能。使得LBS应用的开发过程更加容易。高德地图JS API是一套JavaScript语言开发的地图应用编程接口，移动端、PC端一体化设计，一套API兼容众多系统平台。目前JS API免费开放使用。 J

高德地图为marker添加自定义属性并实时更新位置

夏夏

09-28

7197

查看官方文档，Marker类的属性，方法，事件等，官方地址：覆盖物-参考手册-地图 JS API | 高德地图API高德开放平台官网https://lbs.amap.com/api/javascript-api/reference/overlay#marker 查看官方文档发现MarkerOptions中有extData属性，是用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等。继续往下，会发现有对应的设置与获取自定义数据的方法，直接相当完美了，直接上代..

高德地图自定义信息窗体添加marker 点击列表切换marker

weixin_47996469的博客

01-25

1930

绘制地图 initMap() { this.map.mapObject = new AMap.Map("mapContainer", { center: [this.lng, this.lat], zoom: this.zoom, resizeEnable: true, rotateEnable: true, pitchE

高德地图设置visable:false 后setLabel文本位置错误修复

weixin_42448623的博客

06-17

1269

问题添加标注的代码 let marker = new AMap.Marker({ icon:new AMap.Icon({ image: 'img/icon/'+item.mark, size: new AMap.Size(22, 28), //图标所处区域大小 imageSize: new AMap.Size(22,28) //图标大小 }), visible:false, //不能先设

地图标记点随着缩放位置发生偏移

06-22

### 地图标记点缩放偏移问题的解决方案 地图标记点在缩放时发生位置偏移的问题，通常与地图容器的样式、地图初始化方式以及标记点的偏移设置有关。以下是针对该问题的详细分析和解决方案： #### 1. **调整标记点的偏移量** 在创建标记点时，可以通过设置 `offset` 参数来调整标记点的位置偏移。例如，在高德地图中，可以使用以下代码调整标记点的偏移[^2]： ```javascript var marker = new AMap.Marker({ position: [121.499809, 31.239666], // 设置经纬度 offset: new AMap.Pixel(-10, -10), // 设置偏移量 icon: new AMap.Icon({ size: new AMap.Size(30, 40), // 图标大小 image: imgSrc // 图标路径 }) }); ``` 此方法适用于需要微调标记点位置的场景。 #### 2. **避免 CSS 样式对地图容器的影响** 如果地图容器使用了 `transform` 或其他 CSS 属性（如 `scale`），可能会导致地图缩放时出现偏移问题。为解决此问题，可以将地图嵌套在一个独立的 HTML 文件中，并通过 `iframe` 引用，从而避免父级样式对地图的影响[^4]： ```html <div class="grainBgOne" style="width:500px;height:400px;"> <iframe src="map.html" frameborder="0" style="width: 100%;height: 100%"></iframe> </div> ``` #### 3. **确保地图初始化参数正确** 在 ECharts 中集成百度地图时，需要确保 `bmap` 配置项中的参数设置正确。例如，`center` 和 `zoom` 参数应与实际需求一致。此外，可以通过获取百度地图实例并添加控件来增强用户体验[^3]： ```javascript const option = { bmap: { center: [104.114129, 37.550339], zoom: 5, roam: 'move' } }; var myChart = echarts.init(document.getElementById("mapChart")); myChart.setOption(option); const bmap = myChart.getModel().getComponent("bmap").getBMap(); bmap.addControl(new BMap.NavigationControl({ offset: new BMap.Size(1400, 150) })); ``` #### 4. **百度地图滚轮缩放偏移的特殊处理** 百度地图在某些情况下可能存在滚轮缩放时的偏移问题。为解决这一问题，可以在地图初始化后动态调整地图中心点。例如，监听地图的 `tilesloaded` 事件，并重新设置中心点[^1]： ```javascript var map = new BMap.Map("mapContainer"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("tilesloaded", function () { map.panTo(new BMap.Point(116.404, 39.915)); }); ``` #### 5. **检查地图容器的尺寸变化** 如果地图容器的尺寸在页面加载后发生了变化，可能会导致地图显示异常。可以通过监听窗口的 `resize` 事件并调用地图的 `resize` 方法来解决此问题[^3]： ```javascript window.addEventListener("resize", function () { map.resize(); }); ``` --- ###

谷歌地图 new AMap.Marker 创建标记点 缩放后 位置偏移 解决方案

谷歌地图 new AMap.Marker 创建标记点 缩放后 位置偏移 解决方案

谷歌地图 new AMap.Marker 创建标记点缩放后位置偏移解决方案

谷歌地图 new AMap.Marker 创建标记点缩放后位置偏移解决方案