例子 -- 百度地图 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 });
相关链接 -- 百度地图开放平台
百度地图开放平台地址
