百度地图：ajax获取点位数据后如何循环生成标注

最新推荐文章于 2021-08-06 17:50:58 发布

原创最新推荐文章于 2021-08-06 17:50:58 发布 · 407 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #标注 #ajax #循环生成标注

百度地图 javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Web应用中实现地图上大量标注点高效显示的方法。通过使用聚合标记（Marker Clusterer）技术，可以显著提升加载速度和用户体验。文章详细展示了如何在Java后端与JavaScript前端之间传递地理位置数据，并在地图上正确展示这些位置。

设备的实体类：

public class Ap {

    private String id;//编号

    private Double longitude;//经度

    private Double latitude;//纬度

//getter and setter
}

省略service和dao，action中的代码：

public class ApQueryAction extends MapBaseAction{

    private String aps;

    @Override
    protected String exec() throws BussinessException {
        List<Ap> list = mapService.getAp();
        Gson gson = new Gson();
        aps = gson.toJson(list);
        return SUCCESS;
    }
//getter and setter

页面javascript


	//获得标示物
	var markerList = [];//存放标注对象的数组
	var markerClusterer;//聚合marker对象
	function showAllPoint() {
		//判断是否存在聚合marker对象，避免重复添加标注
		if(markerClusterer){
			markerClusterer.removeMarkers(markerList);
		}
	//将标注列表清空
	markerList=[];
		$.ajax({
			type: "GET",
			url: "getAps.do",
			dataType: "json",
			success: function(data) {
				var Aps = eval(data.aps);
				for(i = 0; i<Aps.length; i++) {
					var apPoint = new BMap.Point(Aps[i].longitude,Aps[i].latitude);
					//将新增的marker对象放入数组
					markerList.push(new BMap.Marker(apPoint));
					//如果使用map.addOverlay(markerList[i])添加大量标注的话会导致浏览器反应速度很慢
					//map.addOverlay(markerList[i]);
				}
				//使用聚合marker,添加大量标注时性能明显提高
				markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markerList});
			}
		});
	}