-1
我使用谷歌地圖折線根據地圖上的路徑來繪製面向圖標。 的問題是，一些沒有被正確地呈現，我無法理解是什麼問題。SVG圖標折線不正確渲染
這裏的代碼
<script>
var minZoomLevel = 17;
var maxZoomLevel = 19;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
mapTypeId: 'terrain',
mapTypeControl: false,
styles: [{featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}, {featureType: "landscape", stylers: [{ visibility: "simplified"}]}],
streetViewControl: false,
center: segn
});
var iconSymbol1_1 = { //zoom 17 blue
path: 'M 0 0 L 40 0 L 40 60 L 0 60 Z',
anchor: new google.maps.Point(20, 0),
scale: 0.10,
strokeColor: '#000000',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: 'steelblue',
fillOpacity: 0.8,
};
var iconSymbol1_2 = { //zoom 17 red
path: 'M 0 0 L 40 0 L 40 60 L 0 60 Z',
anchor: new google.maps.Point(20, 0),
scale: 0.10,
strokeColor: '#000000',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: '#ff0000',
fillOpacity: 0.8,
};
var iconSymbol2_1 = { //zoom 18 blue
path: 'M 0 0 L 40 0 L 40 60 L 0 60 Z',
anchor: new google.maps.Point(20, 0),
scale: 0.20,
strokeColor: '#000000',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: 'steelblue',
fillOpacity: 0.8,
};
var iconSymbol2_2 = { //zoom 18 red
path: 'M 0 0 L 40 0 L 40 60 L 0 60 Z',
anchor: new google.maps.Point(20, 0),
scale: 0.20,
strokeColor: '#000000',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: '#ff0000',
fillOpacity: 0.8,
};
var iconSymbol3_1 = { //zoom 19 blue
path: 'M 0 0 L 35 0 L 35 56 L 0 56 Z',
anchor: new google.maps.Point(20, 0),
scale: 0.40,
strokeColor: '#000000',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: 'steelblue',
fillOpacity: 0.8,
};
var iconSymbol3_2 = { //zoom 19 red
path: 'M 0 0 L 35 0 L 35 56 L 0 56 Z',
anchor: new google.maps.Point(20, 0),
scale: 0.40,
strokeColor: '#000000',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: '#ff0000',
fillOpacity: 0.8,
};
var sensorePath0 = [];
sensorePath0.push(new google.maps.LatLng(40.81849, 14.34015));
sensorePath0.push(new google.maps.LatLng(40.8184636, 14.3401007));
var polyOpts0 = {
map: map,
path: sensorePath0,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline0 = new google.maps.Polyline(polyOpts0);
var sensorePath1 = [];
sensorePath1.push(new google.maps.LatLng(40.8184636, 14.3401007));
sensorePath1.push(new google.maps.LatLng(40.8184371, 14.3400514));
var polyOpts1 = {
map: map,
path: sensorePath1,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline1 = new google.maps.Polyline(polyOpts1);
var sensorePath2 = [];
sensorePath2.push(new google.maps.LatLng(40.8184371, 14.3400514));
sensorePath2.push(new google.maps.LatLng(40.8184107, 14.3400021));
var polyOpts2 = {
map: map,
path: sensorePath2,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline2 = new google.maps.Polyline(polyOpts2);
polyline2.setOptions({icons: [{ icon: iconSymbol1_2 }] });var sensorePath3 = [];
sensorePath3.push(new google.maps.LatLng(40.8184107, 14.3400021));
sensorePath3.push(new google.maps.LatLng(40.8183843, 14.3399529));
var polyOpts3 = {
map: map,
path: sensorePath3,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline3 = new google.maps.Polyline(polyOpts3);
var sensorePath4 = [];
sensorePath4.push(new google.maps.LatLng(40.8183843, 14.3399529));
sensorePath4.push(new google.maps.LatLng(40.8183579, 14.3399036));
var polyOpts4 = {
map: map,
path: sensorePath4,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline4 = new google.maps.Polyline(polyOpts4);
var sensorePath5 = [];
sensorePath5.push(new google.maps.LatLng(40.8183579, 14.3399036));
sensorePath5.push(new google.maps.LatLng(40.8183314, 14.3398543));
var polyOpts5 = {
map: map,
path: sensorePath5,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline5 = new google.maps.Polyline(polyOpts5);
var sensorePath6 = [];
sensorePath6.push(new google.maps.LatLng(40.8183314, 14.3398543));
sensorePath6.push(new google.maps.LatLng(40.818305, 14.339805));
var polyOpts6 = {
map: map,
path: sensorePath6,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline6 = new google.maps.Polyline(polyOpts6);
var sensorePath7 = [];
sensorePath7.push(new google.maps.LatLng(40.818305, 14.339805));
sensorePath7.push(new google.maps.LatLng(40.8182786, 14.3397557));
var polyOpts7 = {
map: map,
path: sensorePath7,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline7 = new google.maps.Polyline(polyOpts7);
var sensorePath8 = [];
sensorePath8.push(new google.maps.LatLng(40.8182786, 14.3397557));
sensorePath8.push(new google.maps.LatLng(40.8182521, 14.3397064));
var polyOpts8 = {
map: map,
path: sensorePath8,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline8 = new google.maps.Polyline(polyOpts8);
var sensorePath9 = [];
sensorePath9.push(new google.maps.LatLng(40.8182521, 14.3397064));
sensorePath9.push(new google.maps.LatLng(40.8182257, 14.3396571));
var polyOpts9 = {
map: map,
path: sensorePath9,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline9 = new google.maps.Polyline(polyOpts9);
var sensorePath10 = [];
sensorePath10.push(new google.maps.LatLng(40.8182257, 14.3396571));
sensorePath10.push(new google.maps.LatLng(40.8181993, 14.3396079));
var polyOpts10 = {
map: map,
path: sensorePath10,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline10 = new google.maps.Polyline(polyOpts10);
var sensorePath11 = [];
sensorePath11.push(new google.maps.LatLng(40.8181993, 14.3396079));
sensorePath11.push(new google.maps.LatLng(40.8181729, 14.3395586));
var polyOpts11 = {
map: map,
path: sensorePath11,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline11 = new google.maps.Polyline(polyOpts11);
var sensorePath12 = [];
sensorePath12.push(new google.maps.LatLng(40.8181729, 14.3395586));
sensorePath12.push(new google.maps.LatLng(40.8181464, 14.3395093));
var polyOpts12 = {
map: map,
path: sensorePath12,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline12 = new google.maps.Polyline(polyOpts12);
var sensorePath13 = [];
sensorePath13.push(new google.maps.LatLng(40.8181464, 14.3395093));
sensorePath13.push(new google.maps.LatLng(40.81812, 14.33946));
var polyOpts13 = {
map: map,
path: sensorePath13,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline13 = new google.maps.Polyline(polyOpts13);
var sensorePath14 = [];
sensorePath14.push(new google.maps.LatLng(40.81812, 14.33946));
sensorePath14.push(new google.maps.LatLng(40.8180889, 14.3394144));
var polyOpts14 = {
map: map,
path: sensorePath14,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline14 = new google.maps.Polyline(polyOpts14);
var sensorePath15 = [];
sensorePath15.push(new google.maps.LatLng(40.8180889, 14.3394144));
sensorePath15.push(new google.maps.LatLng(40.8180578, 14.3393689));
var polyOpts15 = {
map: map,
path: sensorePath15,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline15 = new google.maps.Polyline(polyOpts15);
var sensorePath16 = [];
sensorePath16.push(new google.maps.LatLng(40.8180578, 14.3393689));
sensorePath16.push(new google.maps.LatLng(40.8180267, 14.3393233));
var polyOpts16 = {
map: map,
path: sensorePath16,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline16 = new google.maps.Polyline(polyOpts16);
var sensorePath17 = [];
sensorePath17.push(new google.maps.LatLng(40.8180267, 14.3393233));
sensorePath17.push(new google.maps.LatLng(40.8179956, 14.3392778));
var polyOpts17 = {
map: map,
path: sensorePath17,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline17 = new google.maps.Polyline(polyOpts17);
var sensorePath18 = [];
sensorePath18.push(new google.maps.LatLng(40.8179956, 14.3392778));
sensorePath18.push(new google.maps.LatLng(40.8179644, 14.3392322));
var polyOpts18 = {
map: map,
path: sensorePath18,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline18 = new google.maps.Polyline(polyOpts18);
var sensorePath19 = [];
sensorePath19.push(new google.maps.LatLng(40.8179644, 14.3392322));
sensorePath19.push(new google.maps.LatLng(40.8179333, 14.3391867));
var polyOpts19 = {
map: map,
path: sensorePath19,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline19 = new google.maps.Polyline(polyOpts19);
var sensorePath20 = [];
sensorePath20.push(new google.maps.LatLng(40.8179333, 14.3391867));
sensorePath20.push(new google.maps.LatLng(40.8179022, 14.3391411));
var polyOpts20 = {
map: map,
path: sensorePath20,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline20 = new google.maps.Polyline(polyOpts20);
var sensorePath21 = [];
sensorePath21.push(new google.maps.LatLng(40.8179022, 14.3391411));
sensorePath21.push(new google.maps.LatLng(40.8178711, 14.3390956));
var polyOpts21 = {
map: map,
path: sensorePath21,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline21 = new google.maps.Polyline(polyOpts21);
var sensorePath22 = [];
sensorePath22.push(new google.maps.LatLng(40.8178711, 14.3390956));
sensorePath22.push(new google.maps.LatLng(40.81784, 14.33905));
var polyOpts22 = {
map: map,
path: sensorePath22,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline22 = new google.maps.Polyline(polyOpts22);
var sensorePath23 = [];
sensorePath23.push(new google.maps.LatLng(40.81757, 14.34131));
sensorePath23.push(new google.maps.LatLng(40.8175367, 14.3412683));
var polyOpts23 = {
map: map,
path: sensorePath23,
icons: [{
icon: iconSymbol1_1
}],
strokeColor: '#000000',
strokeWeight: 12,
strokeOpacity: 0.0
}
polyline23 = new google.maps.Polyline(polyOpts23);
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
else if (map.getZoom() > maxZoomLevel) map.setZoom(maxZoomLevel);
switch(zoom){
case 17:
polyline0.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline1.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline2.setOptions({icons: [{ icon: iconSymbol1_2 }] });
polyline3.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline4.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline5.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline6.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline7.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline8.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline9.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline10.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline11.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline12.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline13.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline14.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline15.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline16.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline17.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline18.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline19.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline20.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline21.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline22.setOptions({icons: [{ icon: iconSymbol1_1 }] });
polyline23.setOptions({icons: [{ icon: iconSymbol1_1 }] });
break;
case 18:
polyline0.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline1.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline2.setOptions({icons: [{ icon: iconSymbol2_2 }] });
polyline3.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline4.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline5.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline6.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline7.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline8.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline9.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline10.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline11.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline12.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline13.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline14.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline15.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline16.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline17.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline18.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline19.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline20.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline21.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline22.setOptions({icons: [{ icon: iconSymbol2_1 }] });
polyline23.setOptions({icons: [{ icon: iconSymbol2_1 }] });
break;
case 19:
polyline0.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline1.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline2.setOptions({icons: [{ icon: iconSymbol3_2 }] });
polyline3.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline4.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline5.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline6.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline7.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline8.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline9.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline10.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline11.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline12.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline13.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline14.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline15.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline16.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline17.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline18.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline19.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline20.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline21.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline22.setOptions({icons: [{ icon: iconSymbol3_1 }] });
polyline23.setOptions({icons: [{ icon: iconSymbol3_1 }] });
break;
}
});
}
正如你所看到的，我用不同的縮放級別不同的圖標。我的問題顯示了19個縮放級別。
這是不正確呈現的SVG圖標的例子：
svg not rendered correctly - zoom level 19
這是在不同的縮放級別正確呈現的SVG圖標的例子：
svg rendered correctly - zoom level 18
如果你想爲了更好地理解代碼，這是另一個問題（已解決），在這裏進行解釋。 我再拍問題怎麼一回事，因爲它們是兩個不同的問題。 Question link
請提供[MCVE]演示的問題。 – geocodezip
好的。我刪除了一些與我的問題無關的代碼。您可以在我發佈的第一張圖片中看到它。你能看到一些矩形不能正確渲染嗎？ – seb
我無法運行你的PHP（或你的圖片）。這將是張貼[MCVE]與在表現出該問題的瀏覽器中呈現的代碼更加有用。 – geocodezip