例子 – 百度地图 api 示例
百度地图标注
api地址
思路
优先引入script百度地图对应的api，下方源码是js引入，想用在其他项目方法类似。在script标签里写逻辑，在地图上打点源码
1、引入相应的 api
<!-- 引入jQuery --><script src="/jquery/3.4.1/jquery.js"></script><!-- 引入百度地图 --><script type="text/javascript" src="https://api./api?v=3.0&ak=kYPYEnQdDMrK3UcoPm6Is2C1xH3o19vA">//v3.0版本的引用方式：src="http://api./api?v=3.0&ak=您的密钥"</script><!-- 百度地图 --- 点聚合效果js --><script type="text/javascript" src="https://api./library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script type="text/javascript" src="https://api./library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
2、地图上打点 放在script里
// res.data 接口返回的要打点数据var BASEDATA = res.data;// 创建地图实例 html 里有 <div id="map"></div> map 就是 div 的idvar map = new BMap.Map("map");// 点聚合的数组var markers = [];// 初始化地图，设置 中心点坐标 和 地图级别var point = new BMap.Point(121.631723, 39.003696);map.centerAndZoom(point, 13);// 开启鼠标滚轮缩放map.enableScrollWheelZoom(true);BASEDATA.forEach((item, index) => {// 设置经纬度var p_x = item.shop_longitude;var p_y = item.shop_latitude;// 设置label 根据实际效果替换 label 里的内容var label = new BMap.Label('<div class="shop_wrap"><p class="shop_wrap_title">' + item.shop_name + '</p></div>', { "offset": new BMap.Size(20, -10) });var point1 = new BMap.Point(p_x, p_y);addMarker(point1, label);});// 创建标注---定点function addMarker(p, label) {// 自定义创建点的图标 Size 里设置大小var myIcon = new BMap.Icon("image/icon.png", new BMap.Size(1, 1));// 创建标注var marker = new BMap.Marker(p, { icon: myIcon });// 添加labelmarker.setLabel(label);// 将标注添加到地图中map.addOverlay(marker);// 所有点放在 点聚合数组里markers.push(marker);// 设置lable样式 也可在 style 里根据 label 里的 class 设置样式 ( .shop_wrap{} .shop_wrap_title{} )label.setStyle({border: "none",cursor: "pointer",});}// 点聚合效果，然后调用 markerClusterer 类即可。var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
相关链接 – 百度地图开放平台
百度地图开放平台地址
