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

我有一個地圖，我通過GeoJSON文件調用150個地點，每個地圖都由一個自定義圖像（22px，17px）表示。放大時（縮放17後）問題出現在這些標記看起來相對較小的位置。我想知道有沒有辦法保證讓我的圖標相同的尺寸，每當我放大在放大時增加自定義標記的大小？使用谷歌地圖和GeoJSON

這裏是代碼：

<!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）

來源

2016-04-14 Pablo SP

您可以擴展現有的標記了如在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} 
    }); 
    }); 
})

他們將得到模糊做，你最好創造更高的縮放級別獨立的標誌。

代碼片段：

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"></script> 
 
<div id="zoom"></div> 
 
<div id="map-canvas"></div>

來源

2016-04-14 15:24:47 geocodezip

是的，這完美的作品！ –

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

回答

相關問題