放大時增加自定義標記的大小？使用谷歌地圖和 GeoJSON

Question

我有一張地圖，我通過 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 文件時應用它。 （如何動態設置谷歌地圖標記大小）

Answer 1

您可以按照您參考的問題中所做的那樣放大現有標記

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

它們會變得模糊，您最好為更高的縮放級別創建單獨的標記。

代碼片段：

 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>

放大時增加自定義標記的大小？使用谷歌地圖和 GeoJSON

問題描述

1 個解決方案

解決方案1
1 已采納 2016-04-14 15:24:47

放大時增加自定義標記的大小？ 使用谷歌地圖和 GeoJSON

問題描述

1 個解決方案

解決方案1 1 已采納 2016-04-14 15:24:47

放大時增加自定義標記的大小？使用谷歌地圖和 GeoJSON

解決方案1
1 已采納 2016-04-14 15:24:47