我使用谷歌地图折线根据地图上的路径绘制面向图标。 问题是其中一些没有正确呈现，我无法理解问题是什么。
这是代码
<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
答案 0 :(得分：0)
每个缩放级别相差2倍。比例应改变2倍（缩放级别19 var app = angular.module("app", []);
app.controller("uploadController", ["$scope",
function($scope) {
$scope.submit = function(){
$http.post('Home/GetVendorInfo',
{ "c#Input": $scope.theInputFile})
.success(function (response) {
console.log("send succestul");
}
}
应为scale: 0.35）
