2016-09-26 95 views
0

我有問題讓谷歌地圖折線出現,雖然我有它在非常相似的其他情況下工作。該函數繪製的標記確定,但由於某種原因,兩者之間將出現沒有路徑:如何使谷歌地圖折線出現

var map; 
function initGoogleMap() { 
    var myLatLng = { 
    lat: 10, 
    lng: -97 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 1, 
    center: myLatLng, 
    mapTypeId: 'satellite', 
    mapTypeControl: true, 
    streetViewControl: false, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     mapTypeIds: ['roadmap', 'satellite'] 
    } 
    }); 
} 

function drawArray() { 
    var lats = ["51.5", "21.43", "30", "40.10"]; 
    var lons = ["-0.06", "-100.36", "-223.23", "-333.94"]; 
    var lastLat = 0; 
    var lastLon = 0; 
    for (var t = 0; t < lats.length; t++) { 
    var lat = lats[t]; 
    var lon = lons[t]; 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, lon), 
     icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png", 
     map: map 
    }); 
    var lineSymbol = { 
     // path: 'M 1,-1 1,1', 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
     strokeOpacity: 1, 
     strokeColor: 'white', 
     scale: 1 
    }; 

    if (lastLat !== 0) { 
     $("#show").append("lastLat=" + lastLat + " lastLon=" + lastLon + "<BR>"); 
     $("#show").append("lat=" + lat + " lon=" + lon + "<BR>"); 
     var line = new google.maps.Polyline({ 
     path: [{ 
      lat: lastLat, 
      lng: lastLon 
     }, { 
      lat: lat, 
      lng: lon 
     }], 
     strokeOpacity: 0, 
     icons: [{ 
      icon: lineSymbol, 
      offset: '0', 
      repeat: '20px' 
     }], 
     map: map 
     }); 
    } 
    lastLat = lat; 
    lastLon = lon; 
    } 
} 

initGoogleMap(); 
drawArray(); 

有一個在https://jsfiddle.net/hfeist/t9z29f1q/

+1

我在控制檯中看到一個javascript錯誤:'InvalidValueError:在索引0處:不是LatLng或LatLngLiteral:屬性lat:不是數字' – geocodezip

回答

0

小提琴使用

lats = [51.5, 21.43, 30, 40.10]; 
lons = [-0.06, -100.36, -223.23, -333.94]; 

代替,

var lats = ["51.5", "21.43", "30", "40.10"]; 
var lons = ["-0.06", "-100.36", "-223.23", "-333.94"]; 

JSFiddle demo

+0

因爲我正在讀取一個產生字符串的XML文件,我會採納你的建議但使用lat = Number(lats [t])來獲取數字值。非常感謝davcs86! – user2016210

+0

當然,'lats [t] * 1.0'也應該有效。 – davcs86

+1

另一個選擇是使用'google.maps.LatLng'類([fiddle](https://jsfiddle.net/t9z29f1q/19/)),它似乎強制它的參數爲數字。 – geocodezip