| 高德地图api使用优化(上篇) | 您所在的位置：网站首页 › 高德地图如何设置图标大小 › 高德地图api使用优化(上篇) |
高德地图api使用优化(上篇)
|
「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」 地图js大小大概337k(它一定要被加载，但无必要优先加载) 高德地图采用canvas绘制(可右键检查元素，可以找到canvas元素) 我们从如下几个方面来探讨高德地图的使用最佳实践: 地图js源码如何加载 如何管理好地图图层 设置合适的地图中心点 js异步加载地图js算是一个体积较大的包，有300多kb,网络差的情况下，这个网络消耗也是恐怖如斯也。 没关系，高德地图已经给出了异步加载的代码。在不需要地图api的时候，你可以先不加载。在空闲的时候，或者需要的时候去加载它。官方提供了两种方式: 1,异步脚本 var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad'; var jsapi = doc.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi); 2,通过官方提供的MapLoader AMapLoader.load({ key: '', // 申请好的Web端开发者Key，首次调用 load 时必填 version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 AMapUI: { // 是否加载 AMapUI，缺省不加载 version: '1.1', // AMapUI 缺省 1.1 plugins: ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件 }, Loca: { // 是否加载 Loca， 缺省不加载 version: '1.3.2', // Loca 版本，缺省 1.3.2 }, }) .then((AMap) => { var map = new AMap.Map('container'); map.addControl(new AMap.Scale()); new AMapUI.SimpleMarker({ map: map, position: map.getCenter(), }); }) .catch((e) => { console.error(e); //加载错误提示 });官方推荐使用第二种，第二种方式是优雅的，为何优雅。 代码结构更清晰，地图版本，需要加载的插件，以及更多的特性一目了然。 它提供了一个统一的接口，AMapLoader.load方法。避免异步加载js的混乱写法。 通过封装加载地图js过程，我们在不改变最上层应用代码的前提下，可以不断优化加载速度，应用层代码是无感知的，做到了解耦合。 通过中介，可以提供更多高级的功能。 图层(canvas)，设置纵深关系。图层是指能够在视觉上覆盖一定地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念，一幅地图通常由一个或者多个图层组成。（摘自高德地图jsapi文档) 缺省情况下，也就是初始化地图选项时不传入layers选项，高德地图会创建标准图层。 new AMap.Map('container', {layers: undefined })1.原始的地图长下面这样: 2.去掉amap-layer图层之后长这样（amap-layer的z-index为0):
我们习惯将底图上自带的标示一定信息的文字或图标称为标注，比如 POI 标注，道路名称标注等。 3.去掉amap-labels图层之后长这样（amap-labels的z-index为99):
可以看到，高德地图的图层的纵深关系使用css属性z-index来表示。 点标记marker的z-index为120。它们之间的纵深关系总结如下:amap-layer < amap-labels < amap-markers 因此，我们想要在地图上加上其他的元素，比如可拖拽小卡片，则要将卡片的z-index设置为至少大于120，这样才不会出现灵异事件。 setFitView(设置合适的地图中心点) map.setFitView([polyline,marker1,])这个api让地图中心自动调整到合适的位置，以便更完整地展示地图各图层上地元素,根据覆盖物范围调整视野. 它接收一个数组，通过map.add方法加入到地图上的元素都可以当作数组的元素传入，它会自动帮我们计算中心点。当然，我们可以自己去计算中心。 求求你使用它吧，它做了算法优化。 感谢阅读，尝试文中描述的技巧组合成一个类吧。如果决定对你有点启发，那么动一下你的小手，给深夜坚持写作的笔者一个赞。 |
【本文地址】