如何使用图块坐标Google Maps填充图块内部的颜色?

时间:2018-08-30 09:51:51

标签: javascript jquery css google-maps

我在Google Map上有一个图块叠加层。我想将图块(10,15)着色或填充为红色。在这里,我将图像附加为结果。这是我的代码的链接。https://jsfiddle.net/60fhd57b/3/

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: 5,
center: {lat: 41.850, lng: -87.650}
});

  map.overlayMapTypes.insertAt(
  0, new CoordMapType(new google.maps.Size(200, 200)));
 }

enter image description here

1 个答案:

答案 0 :(得分:0)

这里有一个工作示例: https://jsfiddle.net/60fhd57b/13/

您应该使用类似于您列出的示例的图像替换图像。

通过检查当前坐标是否为您指定的坐标来工作

  if(coord.x == 10 && coord.y == 15){
    div.style.backgroundImage = 'url("url to image")'
  }