为某些地图图块着色答案

【问题标题】：Colour certain map tiles为某些地图图块着色
【发布时间】：2016-12-19 00:19:36
【问题描述】：

我正在尝试为地图上的特定图块设置样式，但不确定如何。谷歌有一个我在这里指的瓷砖的例子： https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay

我已经按照自己的意愿设置了瓷砖的样式，但现在如果我想为特定的瓷砖着色，我该怎么做？

我有一个地图的 JSFiddle 示例：

jsFiddle

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

  CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div');
    div.innerHTML = "coords:" + coord + ", zoom: " + zoom;
    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 = '#0000ff';
    div.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    return div;
  };

function initialize() {
 var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 11,
   center: new google.maps.LatLng(47.53772, -122.1153),
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 map.overlayMapTypes.insertAt(
        0, new CoordMapType(new google.maps.Size(256, 256)));
var marker = new google.maps.Marker({
    position: montpellier,
    map: map
});
}

initialize();

【问题讨论】：

您要设置哪个特定的磁贴，在哪个缩放级别？你想如何设计出与众不同的风格？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

要为特定的图块着色，您需要编写代码来检测要设置样式的图块，然后设置其样式。

if (coord.x == 329 && coord.y == 715 && zoom == 11) {
  div.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';  
} else if (coord.x == 329 && coord.y == 716 && zoom == 11) {
   div.style.backgroundColor = 'rgba(0, 255, 0, 0.8)';  
} else if (coord.x == 330 && coord.y == 715 && zoom == 11) {
   div.style.backgroundColor = 'rgba(0, 0, 255, 0.8)';  
} else {
  div.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
}

proof of concept fiddle

代码 sn-p：

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

   CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
     var div = ownerDocument.createElement('div');
     div.innerHTML = "coords:" + coord + ", zoom: " + zoom;
     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 = '#0000ff';
     if (coord.x == 329 && coord.y == 715 && zoom == 11) {
       div.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
     } else if (coord.x == 329 && coord.y == 716 && zoom == 11) {
       div.style.backgroundColor = 'rgba(0, 255, 0, 0.8)';
     } else if (coord.x == 330 && coord.y == 715 && zoom == 11) {
       div.style.backgroundColor = 'rgba(0, 0, 255, 0.8)';
     } else {
       div.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
     }
     return div;
   };

   function initialize() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 11,
       center: new google.maps.LatLng(47.53772, -122.1153),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });


     map.overlayMapTypes.insertAt(
       0, new CoordMapType(new google.maps.Size(256, 256)));
     var marker = new google.maps.Marker({
       position: {
         lat: 47.5377,
         lng: -122.115
       },
       map: map
     });
   }

   initialize();

#map {
  height: 400px;
  width: 100%;
  border: 6px solid #dedede;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

【讨论】：