2024年高德GIS地图动态显示打点数据，持续更新大厂面试笔试题

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

center: [115.46, 40]

});

map.on(‘zoomend’, function(){

var zoom = map.getZoom();

var h = document.querySelector(‘#zoom’)

h.innerText =‘当前地图层级为：’+zoom

});

var zoomStyleMapping = { //用来表示地图级别与 灵活打点的styles中样式对应关系的映射，

4: 0, // 以下的定义意思是地图的4-9级用 第一个样式（第0项）10-13级用第二个样式（第1项）

5: 0,

6: 0,

7: 0,

8: 0,

9: 0,

10: 1,

11: 1,

12: 1,

13: 1

}

var showBoxMarker = new AMap.ElasticMarker({

position: [116.419763, 39.882967],

zooms: [5, 16], // 设置当前打点在地图的5-16级别区间内执行

styles: [

{ //第一组样式（本例中，4-9级用 第一个样式（第0项）10-13级用第二个样式（第1项））

icon: { // 打点的icon

img: “https://i.i8tq.com/dongao/1112-image8.png”,

size: [300, 200], //可见区域的大小

ancher: [40, 36], //锚点，图标原始大小下锚点所处的位置，相对左上角

//可缺省，当使用精灵图时可用，标示图标在整个图片中左上角的位置

imageSize: [300, 200],

//可缺省，当使用精灵图时可用，整张图片的大小

fitZoom: 10, //最合适的级别，在此级别下显示为原始大小

maxScale: 2, //最大放大比例

minScale: 1 //最小放大比例

},

label: {// 打点的label ，一般可以放入动态的html

content: ‘

test1

’,

position: ‘BM’, //文本位置相对于图标的基准点，

//BL、BM、BR、ML、MR、TL、TM、TR分别代表左下角、底部中央、右下角、

//左侧中央、右侧中央、左上角、顶部中央、右上角。

//缺省时代表相对图标的锚点位置

offset: [40, 36], //相对position的偏移量

minZoom: 6 //label的最小显示级别

}

},

{//第二组样式（本例中，4-9级用 第一个样式（第0项）10-13级用第二个样式（第1项））

icon: {

img: “https://i.i8tq.com/dongao/1112-image1.png”,

size: [200, 120], //可见区域的大小

ancher: [40, 36], //锚点，图标原始大小下锚点所处的位置，相对左上角

//可缺省，当使用精灵图时可用，标示图标在整个图片中左上角的位置

imageSize: [200, 120],

//可缺省，当使用精灵图时可用，整张图片的大小

fitZoom: 10, //最合适的级别，在此级别下显示为原始大小

// scaleFactor: 2, //地图放大一级的缩放比例系数

maxScale: 2, //最大放大比例

minScale: 1 //最小放大比例

},

label: {

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ps://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**