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

执行$sqlEmail = "SELECT email FROM individual"; $query = $db->query($sqlEmail); $user = $db->fetch_array($query); var_dumpr($user);时，您只需获取一个数组并将其分配给名为path = poly.getPath();的变量。然后，当您执行path时，您只需将内容添加到该变量中......它不会更新折线的路径。

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

path.push(position);

无法绘制或显示我的折线

1 个答案: