javascript - 给某些 map 图 block 上色

我正在尝试对 map 上的特定图 block 进行样式设置，但不知道如何设置。谷歌有一个我在这里指的图 block 的示例: https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay

我已经按照自己想要的方式设置了图 block 的样式，但现在如果我想为特定图 block 着色，我该怎么做？

我有一个 JSFiddle map 示例:

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();

最佳答案

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

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

代码片段:

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>

关于javascript - 给某些 map 图 block 上色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41214291/

javascript - 给某些 map 图 block 上色

上一篇：javascript - Django 将 Python 对象从 View 传递到模板中的 Javascript 脚本

下一篇：javascript - 带有输入字段的实时搜索表