不同场景下的水平居中

mapbox 地图 生成矢量数据圆

创建可拖动的标记（Marker）

mapbox 地图添加标记点：图片预加载、marker打点方式

获取当前位置信息：https://blog.csdn.net/gaoqiang1112/article/details/102954673

mapbox 一些特殊用法

最近在做 Mapbox 地图，UI需求是当用户点击或者hover到标记点时，改变该标记点的样式并添加一些动画效果。最开始的思路是想拿到该标记点的元素，想直接改，但是发现不可以改变属性，然后想着在hover标记点时添加一个新标记点，但是添加后的标记点的位置和原始标记点有一些出入，hover时效果不好。想了好久……突然就发现我又可以了吼吼吼吼吼吼吼！！！！思路就是，加载完地图，在添加标记点图层时，再添加一个图层作为hover标记点后的效果图层，初始隐藏掉该图层，当鼠标hover该标记点时将它显示出来看效果：

效果图：功能拆分：（1）显示地图（2）加载地图标记点、点击该标记点出现该标记点的详情弹窗、筛选标记点（3）加载区域范围边界线、hover该区域时出现边界线、点击该区域出现该区域提示信息（4）如果标记点和区域范围上的点击事件重合：解决方案：mapbox两个图层叠加，点击重合部分都触发事件解决方案实现步骤：（2）加载地图标记点、点击该标记点出现该标记点的详情弹窗、筛选标记点① ② ③ ④ ⑤① 加载地图标记点： 使用添加图层方式；区别于上一篇Mapbox 添加标记点（一）使用

geoJson的地图文件：参考：https://blog.csdn.net/qq_42765966/article/details/98759365获取数据地址：http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=3

高德地图：添加标记点、点位筛选、添加点位弹窗

描述：点击切换 正常/异常，地图上显示不同标记点效果图：实现：<template> <div style="height: 100%; width: 100%; text-align: left"> <div ref="basicMapbox" :style="mapSize" class="mapClass"></div> <!-- 点位筛选 --> <div class="lenged_new">

方法一：字符串拼接弹框内容：（弹框内容样式少的情况下）效果图：核心代码：var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`<div class="makerTop"><h2 class="markerHear" > 综合办一处 </h2></div>' '<div class="markerBody" ><p>设

效果图：实现：map组件：<template> <div style="height: 100%; width: 100%; text-align: left"> <div ref="basicMapbox" :style="mapSize" class="mapClass"></div> </div></template><script>import mapboxgl from 'mapbox