Google Maps Javascript API Snap to roads multiple polygon

时间:2016-03-06 07:13:01

标签: javascript google-maps google-maps-api-3

我试图编码从2个不同的lat lon点数组创建的2个独立的snap-to-road多边形。当我将代码更改为仅执行一个多边形时,它看起来很棒。但是,当我更改代码以执行两个多边形时,我得到的不同多边形比我一次完成一个多边形时看到的多边形不同。此外,我注意到第二个多边形不再像它应该的那样按照道路,就像我只在编码一个多边形时看到的那样。

我对此非常困惑。似乎JS API正在努力将多边形放在一起并对着道路进行捕捉。是否有太多的纬度/经度点?

我感谢任何帮助。如果我没有提供足够的信息,请不要犹豫。

这是我的代码:

<script>

function initMap() {

var pos = {lat: 29.744860,lng: -95.361302};

var myOptions = {
    zoom: 11,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);


//FIRST POLYLINE SNAP TO ROAD

roadTrip1 = [

{lat: 29.596497, lng: -95.426788},
{lat: 29.540731, lng: -95.415950},
{lat: 29.533925, lng: -95.400490},
{lat: 29.526571, lng: -95.383886},
{lat: 29.493418, lng: -95.246661},
{lat: 29.429157, lng: -95.240067},
{lat: 29.475006, lng: -94.981166},
{lat: 29.652252, lng: -95.033159},
{lat: 29.637473, lng: -95.163095},
{lat: 29.596965, lng: -95.415699}
    ];

var traceroadTrip1 = new google.maps.Polygon({
   path: roadTrip1,
                    strokeColor: '#5c6670',
                    strokeOpacity: 0.8,
                    strokeWeight: 4,
                    fillColor: '#5c6670',
                    fillOpacity: 0.25
});

var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
    service1.route({origin: roadTrip1[j],destination:
    roadTrip1[j+1],travelMode: 
    google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path = snap_path.concat(result.routes[0].overview_path);
            traceroadTrip1.setPath(snap_path);
        }
    });
}


// SECOND POLYLINE SNAP TO ROAD
roadtrip2 = [
{lat: 29.704807, lng: -95.374714}, 
{lat: 29.753679, lng: -95.354992}, 
{lat: 29.770151, lng: -95.350105}, 
{lat: 29.813047, lng: -95.399361}, 
{lat: 29.780510, lng: -95.501962}, 
{lat: 29.731015, lng: -95.501280}, 
{lat: 29.678863, lng: -95.493037},
{lat: 29.678526, lng: -95.492811},
{lat: 29.696583, lng: -95.417439},  
{lat: 29.693119, lng: -95.413344}, 
{lat: 29.701318, lng: -95.374242}, 
{lat: 29.704807, lng: -95.374714} 
    ];

var traceroadtrip2 = new google.maps.Polygon({
    path: roadtrip2,
                    strokeColor: '#5c6670',
                    strokeOpacity: 0.8,
                    strokeWeight: 4,
                    fillColor: '#5c6670',
                    fillOpacity: 0.25
});

var service2 = new google.maps.DirectionsService(),traceroadtrip2,snap_path2=[];
traceroadtrip2.setMap(map);
for(j=0;j<roadtrip2.length-1;j++){
    service2.route({origin: roadtrip2[j],destination: roadtrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
    if(status == google.maps.DirectionsStatus.OK) {
        snap_path2 = snap_path2.concat(result.routes[0].overview_path);
        traceroadtrip2.setPath(snap_path2);
        }
    });
}


};


window.onload = function() { initMap();};





</script>
         <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API&signed_in=true&callback=initMap"></script>

1 个答案:

答案 0 :(得分:0)

您的代码获得状态<?php session_start(); header('Content-Type: text/html; charset=utf-8'); require("database.php"); require("phpfunctions.php"); //check if the username session variable exists //this will exist only if the person has passed the login stage therefore we now know they are logged in if(!isset($_SESSION['username'])){ header('Location: login.php'); exit(); } //also need to check this username exists in the database and also that the session password matches up with the database. ?> 并且无声地失败,如果您在失败时添加警报,您将看到失败:

OVER_QUERY_LIMIT

fiddle with added alert code

修改代码以处理查询限制,请参阅以下相关问题:

OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?(关于地理编码器,但类似的策略适用于路线服务)