Google Map Api无效值错误

问题描述：

我已经使用Google Maps API创建了以下代码，该代码应该在Google地图上给出两个给定地址之间的方向行。我的代码是：Google Map Api无效值错误

function initMap() 
 
{ 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 8, 
 
      center: {lat: -34.397, lng: 150.644} 
 
     }); 
 

 
    var directionsService = new google.maps.DirectionsService(); 
 
    
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     map: map 
 
    }); 
 
\t \t 
 
    var geocoder = new google.maps.Geocoder(); 
 
    
 
    var pointA,pointB; 
 
    
 

 
     geocoder.geocode({'address': document.getElementById('addressFrom').value}, function(results, status) { 
 
\t \t var location = results[0].geometry.location; 
 
\t \t pointA = new google.maps.LatLng(location.lat(),location.lng()); 
 
\t \t alert(location.lat() + '' + location.lng()); 
 
\t \t }); 
 
\t \t 
 

 
     geocoder.geocode({'address': document.getElementById('addressTo').value}, function(results, status) { 
 
\t \t var location = results[0].geometry.location; 
 
\t \t pointB = new google.maps.LatLng(location.lat(),location.lng()); 
 
\t \t alert(location.lat() + '' + location.lng()); 
 
\t \t }); 
 
\t 
 
\t var markerA = new google.maps.Marker({ 
 
     position: pointA, 
 
     title: "point A", 
 
     label: "A", 
 
     map: map 
 
    }); 
 
\t 
 
\t var markerB = new google.maps.Marker({ 
 
     position: pointB, 
 
     title: "point B", 
 
     label: "B", 
 
     map: map 
 
    }); 
 
\t 
 
\t calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) { 
 
    directionsService.route({ 
 
    origin: pointA, 
 
    destination: pointB, 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
}

<input id="addressFrom" type="textbox" value="Sydney"> 
 
<input id="addressTo" type="textbox" value="London"> 
 
<input id="submit" type="button" value="Geocode" onclick="initMap"> 
 
<div id="map"></div>

从浏览器检查时，我得到了以下错误：

可能重复（http://stackoverflow.com/questions/38406549/google- maps-api-directions-service-displays-text-directions-repeating） – geocodezip

答

地理编码器是异步的，只有将呼叫发送到路线服务后，结果才会返回。

一个提示这个错误是在JavaScript控制台：遗漏的类型错误：无法读取空

的财产“L”

链的地理编码器调用（不知道为什么你需要这些，导航服务需要的地址就好了），将呼叫转移到方向服务进入第二个地理编码操作的回调函数（因此在调用方向服务时这两个位置都可用）。

另一个问题是你不能从悉尼开往伦敦。

代码片段：中[谷歌地图API路线服务显示文本路线重复]

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 8, 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    } 
 
    }); 
 

 
    var directionsService = new google.maps.DirectionsService(); 
 

 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map 
 
    }); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    var pointA, pointB; 
 

 

 
    geocoder.geocode({ 
 
    'address': document.getElementById('addressFrom').value 
 
    }, function(results, status) { 
 
    if (status != "OK") return; 
 
    var location = results[0].geometry.location; 
 
    pointA = new google.maps.LatLng(location.lat(), location.lng()); 
 
    alert(location.lat() + ',' + location.lng()); 
 
    var markerA = new google.maps.Marker({ 
 
     position: pointA, 
 
     title: "point A", 
 
     label: "A", 
 
     map: map 
 
    }); 
 
    geocoder.geocode({ 
 
     'address': document.getElementById('addressTo').value 
 
    }, function(results, status) { 
 
     if (status != "OK") return; 
 
     var location = results[0].geometry.location; 
 
     pointB = new google.maps.LatLng(location.lat(), location.lng()); 
 
     alert(location.lat() + ',' + location.lng()); 
 
     var markerB = new google.maps.Marker({ 
 
     position: pointB, 
 
     title: "point B", 
 
     label: "B", 
 
     map: map 
 
     }); 
 
     calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 
 
    }); 
 
    }); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) { 
 
    directionsService.route({ 
 
    origin: pointA, 
 
    destination: pointB, 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="addressFrom" type="textbox" value="Sydney" /> 
 
<input id="addressTo" type="textbox" value="London" /> 
 
<input id="submit" type="button" value="Geocode" onclick="initMap()" /> 
 
<div id="map"></div>

感谢geocodezip您的解决方案为我工作 –

答

当你调用该函数calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);位置pointA和pointB未定义因为它们是geocoder.geocode的异步调用的结果。

移动calculateAndDisplayRoute函数调用你从geocoder.geocode

geocoder.geocode({ 
    'address': document.getElementById('addressTo').value 
    }, function(results, status) { 
    var location = results[0].geometry.location; 
    poi 

if (status == google.maps.GeocoderStatus.OK) { 
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 
    }

既然你发送你需要等待每个请求的地理编码器地位的两个地址解析请求得到的结果之后。

Google Map Api无效值错误

相关推荐