放大时增加自定义标记的大小？使用谷歌地图和 GeoJSON答案

【问题标题】：Increase size of custom markers while zooming in? Using Google Maps and GeoJSON放大时增加自定义标记的大小？使用谷歌地图和 GeoJSON
【发布时间】：2016-04-14 12:13:47
【问题描述】：

我有一张地图，我通过 GeoJSON 文件调用 150 个位置，每个位置都由一个自定义图像 (22px,17px) 表示。当这些标记看起来相对较小时（在缩放 17 之后）会出现问题。我想知道有没有办法确保在我放大时在我的图标上获得相同的大小。

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false &libraries=visualization"></script>

  <script>
    var map;

    function initialize() {


      var mapOptions = {
        zoom: 13,
        scrollwheel: true,
        panControl: true,
        zoomControl: true,
        scaleControl: false,
        disableDefaultUI: false,
        center: new google.maps.LatLng(19.043516, -98.198232),
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
      };

      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);



      var script = document.createElement('script');
      script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
      document.getElementsByTagName('head')[0].appendChild(script);


      map.data.setStyle(function(feature) {
        var mag = 3;
        var grd = feature.getProperty('Grd');
        var ctgData = feature.getProperty('Ctg');
        var ctgColor = {
          "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
          "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
          "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
        };
        return ({
          icon: ctgColor[ctgData]
        });
      });

    }

    function eqfeed_callback(results) {
      map.data.addGeoJson(results);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

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

</html>

我在这里看到了一些解决方案，但我不知道在从外部调用 GeoJSON 文件时如何应用它。 (How to set Google maps marker size dynamically)

【问题讨论】：

标签： javascript google-maps-api-3 zooming google-maps-markers geojson

【解决方案1】：

您可以像question you reference 中那样放大现有标记

google.maps.event.addListener(map, 'zoom_changed', function() {
  map.data.setStyle(function(feature) {
    var mag = 3;
    var grd = feature.getProperty('Grd');
    var ctgData = feature.getProperty('Ctg');
    var ctgColor = {
      "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
      "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
      "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
    };
    var size;
    var zoom = map.getZoom(); 
    if (zoom > 13) {
      size = new google.maps.Size(44,34);
    } else {
    size = new google.maps.Size(22,17);
    }
    return ({
      icon: {url: ctgColor[ctgData],
      size: size,
      scaledSize: size}
    });
  });
})

它们会变得模糊，最好为更高的缩放级别创建单独的标记。

代码 sn-p：

var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    scrollwheel: true,
    panControl: true,
    zoomControl: true,
    scaleControl: false,
    disableDefaultUI: false,
    center: new google.maps.LatLng(19.043516, -98.198232),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var script = document.createElement('script');
  script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
  document.getElementsByTagName('head')[0].appendChild(script);


  map.data.setStyle(function(feature) {
    var mag = 3;
    var grd = feature.getProperty('Grd');
    var ctgData = feature.getProperty('Ctg');
    var ctgColor = {
      "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
      "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
      "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
    };
    return ({
      icon: ctgColor[ctgData]
    });
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    map.data.setStyle(function(feature) {
      var mag = 3;
      var grd = feature.getProperty('Grd');
      var ctgData = feature.getProperty('Ctg');
      var ctgColor = {
        "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
        "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
        "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
      };
      var size;
      var zoom = map.getZoom();
      document.getElementById("zoom").innerHTML = zoom;
      if (zoom > 13) {
        size = new google.maps.Size(44, 34);
      } else {
        size = new google.maps.Size(22, 17);
      }
      return ({
        icon: {
          url: ctgColor[ctgData],
          size: size,
          scaledSize: size
        }
      });
    });
  })
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="zoom"></div>
<div id="map-canvas"></div>

【讨论】：