百度地图 --- 自定义标注点

例子 -- 百度地图 api 示例

百度地图标注 api 地址

思路

• 优先引入script 百度地图对应的 api，下方源码是js引入，想用在其他项目方法类似。
• 在 script 标签里写逻辑，在地图上打点

源码

1、引入相应的 api

<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入百度地图 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=kYPYEnQdDMrK3UcoPm6Is2C1xH3o19vA">
//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
<!-- 百度地图 --- 点聚合效果js -->
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

2、地图上打点 放在 script 里

// res.data 接口返回的要打点数据
var BASEDATA = res.data;
// 创建地图实例  html 里有 <div id="map"></div> map 就是 div 的id
var 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 });
  // 添加label
  marker.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 });

相关链接 -- 百度地图开放平台

百度地图开放平台地址