Question

我使用API在谷歌地图上绘制网格。

function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650}
  });

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

上面的代码是在地图上绘制网格。

但我无法在每个网格单元格中添加addActionListener（onclick，mouseover ...）。

如何将addActionListener添加到网格单元？

Answer 1

检查我刚刚在codepen上创建的示例here

希望它有所帮助。

转换方法来自google示例google example，您应该尝试在地图对象上添加eventListener而不是div元素。

function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650}
  });

  map.addListener('click', function(e) {
    if(_INFO_WINDOW){
      _INFO_WINDOW.close();
      _INFO_WINDOW.setMap(null);
    }
    var scale = 1 << map.getZoom();
    var worldCoordinate = project(e.latLng);

    var tileCoordinate = new google.maps.Point(
      Math.floor(worldCoordinate.x * scale / TILE_SIZE),
      Math.floor(worldCoordinate.y * scale / TILE_SIZE));

    var content = '';
    content += 'lat: ' + e.latLng.lat() + "<br />";
    content += 'lng: ' + e.latLng.lng() + "<br />";
    content += 'tile Coord: ' + tileCoordinate;

    _INFO_WINDOW = new google.maps.InfoWindow({
      content: content,
      position: e.latLng,
      map: map
    });
  });

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

function project(latLng) {
  var siny = Math.sin(latLng.lat() * Math.PI / 180);

  // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  // about a third of a tile past the edge of the world tile.
  siny = Math.min(Math.max(siny, -0.9999), 0.9999);

  return new google.maps.Point(
      TILE_SIZE * (0.5 + latLng.lng() / 360),
      TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)));
}

var _INFO_WINDOW = null;
var TILE_SIZE = 256;

initMap();

Answer 2

每个磁贴都无法添加clickHandler。你需要做的是一个小解决方法：

将clickHandler添加到地图
获取ClickEvent的LatLng
使用地图投影map.getProjection()将坐标转换为世界坐标/点平面
使用您的实际缩放级别来计算像素坐标pixelCoordinateX = parseInt(worldCoordinateX * Math.pow(2, zoom), 10)（对y执行相同的操作）
将pixelCoordinates除以切片大小（在您的情况下为256）：tileNoX = parseInt(pixelCoordinateX / 256, 10)。现在你应该有你的瓷砖编号。

这对你有帮助吗？

我可以制作google.map.overlayMapTypes.insertAt（）actionListener吗？

2 个答案: