沒有工作

我是新來使用谷歌地圖API谷歌地圖API的例子，我使用的谷歌關閉文檔一些示例代碼不工作，我想知道如果有人能幫助我解決它爲什麼止跌」爲我工作？下面是代碼本身：<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true" ></script>沒有工作

<script> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    var mapOptions = { 
     zoom:7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    } 

    function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } 
    }); 
    } 
</script>

這裏是HTML：

` <body onload="initialize()"> 
<div> 
<b>Start: </b> 
<select id="start" onchange="calcRoute();"> 
    <option value="chicago, il">Chicago</option> 
    <option value="st louis, mo">St Louis</option> 
    <option value="joplin, mo">Joplin, MO</option> 
    <option value="oklahoma city, ok">Oklahoma City</option> 
    <option value="amarillo, tx">Amarillo</option> 
    <option value="gallup, nm">Gallup, NM</option> 
    <option value="flagstaff, az">Flagstaff, AZ</option> 
    <option value="winona, az">Winona</option> 
    <option value="kingman, az">Kingman</option> 
    <option value="barstow, ca">Barstow</option> 
    <option value="san bernardino, ca">San Bernardino</option> 
    <option value="los angeles, ca">Los Angeles</option> 
</select> 
<b>End: </b> 
<select id="end" onchange="calcRoute();"> 
    <option value="chicago, il">Chicago</option> 
    <option value="st louis, mo">St Louis</option> 
    <option value="joplin, mo">Joplin, MO</option> 
    <option value="oklahoma city, ok">Oklahoma City</option> 
    <option value="amarillo, tx">Amarillo</option> 
    <option value="gallup, nm">Gallup, NM</option> 
    <option value="flagstaff, az">Flagstaff, AZ</option> 
    <option value="winona, az">Winona</option> 
    <option value="kingman, az">Kingman</option> 
    <option value="barstow, ca">Barstow</option> 
    <option value="san bernardino, ca">San Bernardino</option> 
    <option value="los angeles, ca">Los Angeles</option> 
</select> 
</div>`

來源

2013-03-15 davidbenjamin998

據我瞭解u需要谷歌ID /關鍵可以做谷歌地圖。你是否有一個？ – 2013-03-15 16:23:20

我在腳本的最頂端？ – davidbenjamin998 2013-03-15 16:25:08

當我添加我的API密鑰時，我總是收到以下消息： Google已經禁止將Google Maps API用於此應用程序。所提供的密鑰不是有效的Google API密鑰，也未授權此網站上的Google Maps JavaScript API v3。如果您是此應用程序的所有者，您可以在這裏瞭解如何獲取有效密鑰：https：//developers.google.com/maps/documentation/javascript/tutorial#api_key – davidbenjamin998 2013-03-15 16:25:59

初始化（）函數需要被調用。它可以在<body>標籤是這樣的：

<body onload="initialize();">

來源

2013-03-15 16:27:39 Vero

我已經在我的身體已經標記並 – davidbenjamin998 2013-03-15 16:28:32

你也有ID =地圖畫布元素的頁面，其中地圖是裏面顯示？ – Vero 2013-03-15 16:33:15

是的，我做的是低於我所有的HTML – davidbenjamin998 2013-03-15 16:42:36

你有元素得到start和end值？此代碼適用於從joliet到內珀維爾的路由：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<style> 
#map-canvas {height:500px;width:500px;} 
</style> 
</head> 

<body onload="initialize()"> 
<div id="map-canvas"></div> 
<div> 
<b>Start: </b> 
<select id="start" onchange="calcRoute();"> 
    <option value="chicago, il">Chicago</option> 
    <option value="st louis, mo">St Louis</option> 
    <option value="joplin, mo">Joplin, MO</option> 
    <option value="oklahoma city, ok">Oklahoma City</option> 
    <option value="amarillo, tx">Amarillo</option> 
    <option value="gallup, nm">Gallup, NM</option> 
    <option value="flagstaff, az">Flagstaff, AZ</option> 
    <option value="winona, az">Winona</option> 
    <option value="kingman, az">Kingman</option> 
    <option value="barstow, ca">Barstow</option> 
    <option value="san bernardino, ca">San Bernardino</option> 
    <option value="los angeles, ca">Los Angeles</option> 
</select> 
<b>End: </b> 
<select id="end" onchange="calcRoute();"> 
    <option value="chicago, il">Chicago</option> 
    <option value="st louis, mo">St Louis</option> 
    <option value="joplin, mo">Joplin, MO</option> 
    <option value="oklahoma city, ok">Oklahoma City</option> 
    <option value="amarillo, tx">Amarillo</option> 
    <option value="gallup, nm">Gallup, NM</option> 
    <option value="flagstaff, az">Flagstaff, AZ</option> 
    <option value="winona, az">Winona</option> 
    <option value="kingman, az">Kingman</option> 
    <option value="barstow, ca">Barstow</option> 
    <option value="san bernardino, ca">San Bernardino</option> 
    <option value="los angeles, ca">Los Angeles</option> 
</select> 
</div>` 
     <script> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    var mapOptions = { 
     zoom:7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    } 

    function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } 
    }); 
    } 
</script> 
</body> 
</html>

來源

2013-03-15 16:32:07

有我的HTML，你是如何得到它爲你的工作？ – davidbenjamin998 2013-03-15 16:35:17

什麼不適合你？你沒有收到地圖嗎？沒有獲得路線？你有沒有辦法真正運行'calcRoute'函數（就像我這裏的「go」按鈕）？ – 2013-03-15 16:37:18

對不起，我應該說，我沒有得到地圖或任何東西 – davidbenjamin998 2013-03-15 16:38:16

在結束終止組合框div後，似乎還有一個錯誤。不造成傷害，但不屬於。

來源

2013-03-18 14:54:05 ginalster

回答

相關問題