高德map点标记随zoom缩放位置不变

2023-12-19 16:52
文章标签 标记 位置 map 缩放 高德 不变 zoom

本文主要是介绍高德map点标记随zoom缩放位置不变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;onMounted(() => {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.ElasticMarker",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等// .4.15版本// version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15// plugins: [//   "ElasticMarker",// ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [ 126.128627,41.146943], // 初始化地图中心点位置});var facilities = [];var zoomStyleMapping1 = {"1": 0,"2": 0,"3": 0,"4": 0,"5": 0,"6": 0,"7": 0,"8": 0,"9": 0,"10": 0,"11": 0,"12": 0,"13": 0,"14": 0,"15": 0,"16": 0,"17": 0,"18": 0,"19": 0,"20": 0}//    map.add(facilities)
let markerData = [{"position": [126.119315,41.133725],icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png',name:"点1"
},{"position": [126.116762, 41.131542],icon: 'https://a.amap.com/jsapi_demos/static/resource/img/门票.png',name:"点2"
}]
for(var i=0;i<markerData.length;i+=1){var marker = new AMap.ElasticMarker({position:markerData[i].position,zooms:[1,20],styles:[{icon:{img:markerData[i].icon,size:[16,16],//可见区域的大小ancher:"bottom-center",//锚点,【决定点的绝对位置是否会岁zoom的改变而改变fitZoom:14,//最合适的级别scaleFactor:2,//地图放大一级的缩放比例系数maxScale:1.4,//最大放大比例minScale:0.8//最小放大比例}}],zoomStyleMapping:zoomStyleMapping1})console.log(marker)facilities.push(marker);}
//    console.log('facilities',facilities)map.add(facilities)let line = {"isOutline": true,"outlineColor": "#828282","borderWeight": 3,"strokeColor": "#cacaca","strokeOpacity": 0.6,"strokeWeight": 5,"strokeStyle": "solid","lineJoin": "round","lineCap": "round","cursor": "pointer","path": [[126.128627,41.146943],[126.12425,41.137959],[126.113693,41.128908]],"myId": 49,"myCode": "GWX"
}let lineObj = new AMap.Polyline(line)map.add(lineObj)map.on('click',function(e){console.log(e.lnglat+'')})new AMap.Polygon({cursor:'pointer',bubble:true,path:[[116.419763,39.882967],[116.419791,39.882397],[116.419674,39.882398],[116.419632,39.882376],[116.419086,39.882371],[116.41912,39.88163],[116.41769,39.881571],[116.417726,39.880507],[116.417791,39.879454],[116.417847,39.878396],[116.417896,39.87733],[116.418027,39.874746],[116.418002,39.874715],[116.417888,39.874716],[116.417732,39.874711],[116.417141,39.874692],[116.416588,39.874675],[116.415591,39.874645],[116.413683,39.874562],[116.413676,39.874127],[116.412921,39.874095],[116.41292,39.874514],[116.412799,39.874549],[116.412244,39.874536],[116.411768,39.874504],[116.411358,39.874478],[116.410034,39.874414],[116.408755,39.874363],[116.408182,39.874332],[116.407259,39.87431],[116.406883,39.8743],[116.406732,39.877576],[116.406254,39.877576],[116.405835,39.877582],[116.40576,39.877621],[116.40574,39.878041],[116.405721,39.878541],[116.404778,39.878539],[116.404748,39.878529],[116.404722,39.87849],[116.404622,39.878493],[116.403535,39.878467],[116.402885,39.878451],[116.402863,39.879073],[116.403702,39.879094],[116.404528,39.879117],[116.404525,39.879152],[116.404636,39.879157],[116.405664,39.879199],[116.405639,39.879913],[116.405593,39.880618],[116.404583,39.880596],[116.404308,39.880602],[116.403795,39.880609],[116.403062,39.880597],[116.402629,39.880599],[116.40199,39.88061],[116.401413,39.880621],[116.400929,39.880633],[116.400889,39.880849],[116.400792,39.880896],[116.400505,39.880913],[116.400405,39.880918],[116.400393,39.88117],[116.400955,39.881193],[116.40089,39.881923],[116.400878,39.882144],[116.400849,39.882624],[116.400794,39.883245],[116.400741,39.883927],[116.400742,39.884154],[116.401057,39.885182],[116.400731,39.885279],[116.400931,39.885696],[116.401043,39.885883],[116.40131,39.886259],[116.401549,39.886532],[116.401668,39.88664],[116.403101,39.886729],[116.403125,39.886766],[116.403145,39.886835],[116.403133,39.886969],[116.403102,39.887379],[116.403144,39.88749],[116.403868,39.88768],[116.404604,39.887846],[116.40549,39.887973],[116.406221,39.888038],[116.40773,39.888094],[116.409536,39.888147],[116.411578,39.888205],[116.413718,39.888269],[116.414653,39.888295],[116.415318,39.888293],[116.41583,39.888257],[116.416241,39.888216],[116.416638,39.88812],[116.416952,39.88804],[116.417343,39.887944],[116.417594,39.887849],[116.417843,39.887737],[116.41803,39.887623],[116.418233,39.887495],[116.418504,39.887327],[116.418719,39.887187],[116.418956,39.887043],[116.419171,39.886916],[116.419415,39.886666],[116.419618,39.886341],[116.42003,39.885517],[116.420323,39.884945],[116.420455,39.88462],[116.420547,39.884246],[116.420558,39.883975],[116.420572,39.883615],[116.420455,39.883601],[116.419832,39.883562],[116.419749,39.883521],[116.41974,39.88346],[116.419763,39.882967]],map:map,fillOpacity:0.3,strokeWeight:1,fillColor:'green'})}).catch((e) => {console.log(e);});
});onUnmounted(() => {map?.destroy();
});
</script><template><div id="container"></div>
</template><style scoped>
#container {width: 100%;height: 800px;
}
</style>

版本不同效果不同，与ancher有关

这篇关于高德map点标记随zoom缩放位置不变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/512966。

相关文章

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

《Python将大量遥感数据的值缩放指定倍数的方法(推荐)》本文介绍基于Python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处理,并将所得处理后数据保存为新的遥感影像... 本文介绍基于python中的gdal模块，批量读取大量多波段遥感影像文件，分别对各波段数据加以数值处
阅读更多...
基于WinForm+Halcon实现图像缩放与交互功能

基于WinForm+Halcon实现图像缩放与交互功能

《基于WinForm+Halcon实现图像缩放与交互功能》本文主要讲述在WinForm中结合Halcon实现图像缩放、平移及实时显示灰度值等交互功能,包括初始化窗口的不同方式,以及通过特定事件添加相应... 目录前言初始化窗口添加图像缩放功能添加图像平移功能添加实时显示灰度值功能示例代码总结最后前言本文将
阅读更多...
如何用Java结合经纬度位置计算目标点的日出日落时间详解

如何用Java结合经纬度位置计算目标点的日出日落时间详解

《如何用Java结合经纬度位置计算目标点的日出日落时间详解》这篇文章主详细讲解了如何基于目标点的经纬度计算日出日落时间,提供了在线API和Java库两种计算方法,并通过实际案例展示了其应用,需要的朋友... 目录前言一、应用示例1、天安门升旗时间2、湖南省日出日落信息二、Java日出日落计算1、在线API2
阅读更多...
POJ1269 判断2条直线的位置关系

POJ1269 判断2条直线的位置关系

题目大意：给两个点能够确定一条直线，题目给出两条直线（由4个点确定），要求判断出这两条直线的关系：平行，同线，相交。如果相交还要求出交点坐标。 解题思路： 先判断两条直线p1p2, q1q2是否共线， 如果不是，再判断 直线 是否平行， 如果还不是， 则两直线相交。  判断共线：  p1p2q1 共线 且 p1p2q2 共线 ，共线用叉乘为 0  来判断，  判断 平行：  p1p
阅读更多...
脏页的标记方式详解

脏页的标记方式详解

脏页的标记方式 一、引言 在数据库系统中，脏页是指那些被修改过但还未写入磁盘的数据页。为了有效地管理这些脏页并确保数据的一致性，数据库需要对脏页进行标记。了解脏页的标记方式对于理解数据库的内部工作机制和优化性能至关重要。 二、脏页产生的过程 当数据库中的数据被修改时，这些修改首先会在内存中的缓冲池（Buffer Pool）中进行。例如，执行一条 UPDATE 语句修改了某一行数据，对应的缓
阅读更多...
Collection List Set Map的区别和联系

Collection List Set Map的区别和联系

Collection List Set Map的区别和联系 这些都代表了Java中的集合，这里主要从其元素是否有序，是否可重复来进行区别记忆，以便恰当地使用，当然还存在同步方面的差异，见上一篇相关文章。 有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否
阅读更多...
三色标记（Tri-color marking）

三色标记（Tri-color marking）

维基百科部分 原文 https://en.wikipedia.org/wiki/Tracing_garbage_collection#TRI-COLOR Because of these performance problems, most modern tracing garbage collectors implement some variant of the tri-color ma
阅读更多...
Linux Centos 迁移Mysql 数据位置

Linux Centos 迁移Mysql 数据位置

转自：http://www.tuicool.com/articles/zmqIn2 由于业务量增加导致安装在系统盘(20G)磁盘空间被占满了, 现在进行数据库的迁移. Mysql 是通过 yum 安装的. Centos6.5Mysql5.1 yum 安装的 mysql 服务 查看 mysql 的安装路径 执行查询 SQL show variables like
阅读更多...
PDFQFZ高效定制：印章位置、大小随心所欲

PDFQFZ高效定制：印章位置、大小随心所欲

前言 在科技编织的快节奏时代，我们不仅追求速度，更追求质量，让每一分努力都转化为生活的甜蜜果实——正是在这样的背景下，一款名为PDFQFZ-PDF的实用软件应运而生，它以其独特的功能和高效的处理能力，在PDF文档处理领域脱颖而出。 它的开发，源自于对现代办公效率提升的迫切需求。在数字化办公日益普及的今天，PDF作为一种跨平台、不易被篡改的文档格式，被广泛应用于合同签署、报告提交、证书打印等各个
阅读更多...
Map

Map

Map 是 Java 中用于存储键值对的集合接口。以下是对 Map 的详细介绍： 特点 键值对存储：每个元素包含一个键和一个值。 键唯一：键不能重复，但值可以重复。 无序/有序：根据具体实现，键值对的顺序可能无序（如 HashMap）或有序（如 TreeMap、LinkedHashMap）。 主要实现类 HashMap 基于哈希表，无序存储。 允许一个 null 键和多个 null 值。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2