腾讯地图JSAPI教程-海量点批量添加自定义覆盖物

2023-12-07 10:54:34

前言

在地图上添加覆盖物可以直观展示各种地理信息数据。腾讯地图JSAPI提供了多种方式添加覆盖物，比如原生覆盖物、热力图、栅格覆盖物等。其中，原生覆盖物是使用最多的，它可以添加各种类型的地理要素，比如点、线、面、文本等。

正文

1. 添加单个覆盖物

添加单个覆盖物非常简单，直接调用addOverlay方法即可。例如，添加一个点覆盖物：

var marker = new QMap.Marker({
  map: map,
  position: new QMap.LatLng(39.911601, 116.397458)
});

2. 添加多个覆盖物

如果需要添加多个覆盖物，可以一次性添加到一个覆盖物组中，然后将覆盖物组添加到地图中。例如，添加10个点覆盖物：

var markers = [];
for (var i = 0; i < 10; i++) {
  var marker = new QMap.Marker({
    map: map,
    position: new QMap.LatLng(39.911601 + i * 0.01, 116.397458 + i * 0.01)
  });
  markers.push(marker);
}

var markerGroup = new QMap.OverlayGroup(markers);
map.addOverlay(markerGroup);

3. 海量点批量添加覆盖物

当需要添加海量点覆盖物时，直接调用addOverlay方法会非常耗时。为了提高性能，腾讯地图JSAPI提供了addOverlays方法，可以一次性添加多个覆盖物。

var markers = [];
for (var i = 0; i < 10000; i++) {
  var marker = new QMap.Marker({
    map: map,
    position: new QMap.LatLng(39.911601 + i * 0.01, 116.397458 + i * 0.01)
  });
  markers.push(marker);
}

map.addOverlays(markers);

4. 自定义覆盖物

腾讯地图JSAPI还提供了自定义覆盖物功能，可以根据需要自定义覆盖物的样式和行为。例如，可以自定义一个带有气泡的点覆盖物：

var MyMarker = QMap.Marker.extend({
  // 构造函数
  initialize: function(options) {
    this.point = options.point;
    this.content = options.content;
    this._super(options);
  },

  // 覆盖物添加至地图时调用
  onAdd: function() {
    this._marker = new QMap.Marker({
      map: this._map,
      position: this.point
    });

    this._popup = new QMap.Popup({
      anchor: this._marker,
      content: this.content
    });
  },

  // 覆盖物从地图中移除时调用
  onRemove: function() {
    this._marker.setMap(null);
    this._popup.setMap(null);
  }
});

var marker = new MyMarker({
  point: new QMap.LatLng(39.911601, 116.397458),
  content: '气泡内容'
});

map.addOverlay(marker);