例子 -- 百度地圖 api 示例

百度地圖標(biāo)注 api 地址

思路

• 優(yōu)先引入script 百度地圖對(duì)應(yīng)的 api，下方源碼是js引入，想用在其他項(xiàng)目方法類似。
• 在 script 標(biāo)簽里寫邏輯，在地圖上打點(diǎn)

源碼

1、引入相應(yīng)的 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>
<!-- 百度地圖 --- 點(diǎn)聚合效果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、地圖上打點(diǎn) 放在 script 里

// res.data 接口返回的要打點(diǎn)數(shù)據(jù)
var BASEDATA = res.data;
// 創(chuàng)建地圖實(shí)例  html 里有 <div id="map"></div> map 就是 div 的id
var map = new BMap.Map("map");
// 點(diǎn)聚合的數(shù)組
var markers = [];
// 初始化地圖，設(shè)置 中心點(diǎn)坐標(biāo) 和 地圖級(jí)別
var point = new BMap.Point(121.631723, 39.003696);
map.centerAndZoom(point, 13);
// 開啟鼠標(biāo)滾輪縮放
map.enableScrollWheelZoom(true);

BASEDATA.forEach((item, index) => {
  // 設(shè)置經(jīng)緯度
  var p_x = item.shop_longitude;
  var p_y = item.shop_latitude;
  // 設(shè)置label  根據(jù)實(shí)際效果替換 label 里的內(nèi)容
  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);
});

// 創(chuàng)建標(biāo)注---定點(diǎn)
function addMarker(p, label) {
  // 自定義創(chuàng)建點(diǎn)的圖標(biāo)   Size  里設(shè)置大小
  var myIcon = new BMap.Icon("image/icon.png", new BMap.Size(1, 1));
  // 創(chuàng)建標(biāo)注
  var marker = new BMap.Marker(p, { icon: myIcon });
  // 添加label
  marker.setLabel(label);
  // 將標(biāo)注添加到地圖中
  map.addOverlay(marker);
  // 所有點(diǎn)放在 點(diǎn)聚合數(shù)組里
  markers.push(marker);
  // 設(shè)置lable樣式   也可在 style 里根據(jù) label 里的 class 設(shè)置樣式 ( .shop_wrap{}  .shop_wrap_title{}  )
  label.setStyle({
    border: "none",
    cursor: "pointer",
  });
}

// 點(diǎn)聚合效果，然后調(diào)用 markerClusterer 類即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });

相關(guān)鏈接 -- 百度地圖開放平臺(tái)

百度地圖開放平臺(tái)地址