谷歌地图api 3 -不能得到我的折线绘制或可见

Question

我试着按照这个例子画一条折线:https://developers.google.com/maps/documentation/javascript/examples/geometry-encodings。

我的地图显示，标记也显示，但折线没有绘制，或不可见。我看不出有什么问题。

我的javascript是:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
$( document ).ready(function($) {
    var map;
    var poly;
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var ndgIconBase = 'http://example.com/img/';
    var clickMarker;
    nextWaypoint = parseInt(document.getElementById('agpoiwaypoints_size').innerHTML, 10);
    countWaypoint = nextWaypoint;
    function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var content;
        content = document.getElementById('agpoi-0-lat').innerHTML
        var lat0 = parseFloat(content.substr(content.indexOf(":")+1));
        content = document.getElementById('agpoi-0-lng').innerHTML
        var lng0 = parseFloat(content.substr(content.indexOf(":")+1));
        content = document.getElementById('agpoi-1-lat').innerHTML
        var lat1 = parseFloat(content.substr(content.indexOf(":")+1));
        content = document.getElementById('agpoi-1-lng').innerHTML
        var lng1 = parseFloat(content.substr(content.indexOf(":")+1));
        var mapOptions = {
          center: new google.maps.LatLng((lat1 + lat0) / 2, (lng1 + lng0) / 2),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(mapCanvas, mapOptions);
        var polyOptions = {
            strokeColor: '#000000',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            map: map
        };
        poly = new google.maps.Polyline(polyOptions);
        new google.maps.Marker({
          position: {lat: lat0, lng: lng0},
          map: map,
          icon: ndgIconBase + 'myLogo.png'
        });    
        new google.maps.Marker({
            position: {lat: lat1, lng: lng1},
            map: map,
            icon: ndgIconBase + 'myLogo.png'
        });
        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng, map);
        });
        var position = {lat: lat0, lng: lng0};
        var path = poly.getPath();
        path.push(position);
        var content;
        for (i = 0; i < countWaypoint; i++) {
            content = document.getElementById("agpoiwaypoints-" + i + "-latitude").value;
            lat = parseFloat(content);
            content = document.getElementById("agpoiwaypoints-" + i + "-longitude").value;
            lng = parseFloat(content);
            position = {lat: lat, lng: lng};
            new google.maps.Marker({
                position: position,
                map: map
            });
            path = poly.getPath();
            path.push(position);
        }
        position = {lat: lat1, lng: lng1};
        path = poly.getPath();
        path.push(position);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, 'click', placeMarker);
    function placeMarker(position, map) {
        if (clickMarker == 0) {
            clickMarker = new google.maps.Marker({
                position: position,
                map: map
            });
        } else {
            clickMarker.setPosition( position );
        }
    }  
    $("body").on("click", ".remove_agpoiwaypoint", function (e) {
        e.preventDefault();
    });
    $("body").on("click", ".add_agpoiwaypoint", function (e) {
        e.preventDefault();
        var path = poly.getPath();
        var position = clickMarker.getPosition();
        path.push(position);
    });
});

Answer 1

当你做path = poly.getPath();时，你只是得到一个数组并将其分配给一个名为path的变量。然后，当你做path.push(position);时，你只是将一些东西添加到变量中……它没有更新折线的路径。

相反，你需要更新折线，例如，然后你也可以做

poly.setPath(path);