將GeoJson LineString格式化為Dashed

Question

這是我的GeoJson：

{
    "type" : "FeatureCollection",
    "created" : "2014/07/08 03:00:55 GMT",
    "announced_date" : "2017/07/10 03:00:55 GMT",
    "features" : [{
            "type" : "Feature",
            "properties" : {
                "name" : "n18",
                "analized_date" : "2013/07/08 10:00:00 GMT"
            },
            "geometry" : {
                "type" : "GeometryCollection",
                "geometries" : [{
                        "type" : "Point",
                        "coordinates" : [134.7, 37.3]
                    }, {
                        "type" : "LineString",
                        "coordinates" : [[134.7, 37.3], [134.6, 37.1]]
                    }
                ]
            }
        }]
}

我可以在法線顯示它，但我希望顯示為虛線。 我谷歌有一種方法：使用折線，但我不知道如何將其轉換為折線。

請幫忙 。 謝謝 ：） 。

Answer 1

要使多邊形線變為虛線，您必須創建一個原生的google.maps.Polyline對象。 一種方法是使用數據層加載GeoJSON，然后使用其方法從GeoJSON創建折線：

代碼段：

 function initialize() { // Create a simple map. map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 8, center: { lat: 37, lng: 134 } }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // process the loaded GeoJSON data. google.maps.event.addListener(map.data, 'addfeature', function(e) { if (e.feature.getGeometry().getType() === 'GeometryCollection') { var geometry = e.feature.getGeometry().getArray(); for (var i = 0; i < geometry.length; i++) { if (geometry[i].getType() === 'Point') { map.setCenter(geometry[i].get()); new google.maps.Marker({ map: map, position: geometry[i].get() }); } else if (geometry[i].getType() === 'LineString') { new google.maps.Polyline({ map: map, path: geometry[i].getArray(), // make the polyline dashed. From the example in the documentation: // https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed strokeOpacity: 0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }, offset: '0', repeat: '20px' }] }) } } } map.data.setMap(null); }); map.data.addGeoJson(data); } google.maps.event.addDomListener(window, 'load', initialize); var data = { "type" : "FeatureCollection", "created" : "2014/07/08 03:00:55 GMT", "announced_date" : "2017/07/10 03:00:55 GMT", "features" : [{ "type" : "Feature", "properties" : { "name" : "n18", "analized_date" : "2013/07/08 10:00:00 GMT" }, "geometry" : { "type" : "GeometryCollection", "geometries" : [{ "type" : "Point", "coordinates" : [134.7, 37.3] }, { "type" : "LineString", "coordinates" : [[134.7, 37.3], [134.6, 37.1]] } ] } }] }; 

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

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