谷歌地圖API asp.net

我想在ASR.NET mvc中使用谷歌地圖API。我想使用DirectionsRenderer。我閱讀了關於here的文檔並嘗試使用示例但是，此映射未在我的網站中呈現。哪裏可能有問題？谷歌地圖API asp.net

<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false"> 
    </script> 
    <script> 
     var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 

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

      var control = document.getElementById('control'); 
      control.style.display = 'block'; 
      map.controls[google.maps.ControlPosition.TOP].push(control); 
     } 

     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); 
       } 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="control"> 
     <strong>Start:</strong> 
     <select id="start" onchange="calcRoute();"> 
      <option value="chicago, il">Chicago</option> 
      <option value="st louis, mo">St Louis</option> 
     </select> 
     <strong>End:</strong> 
     <select id="end" onchange="calcRoute();"> 
      <option value="chicago, il">Chicago</option> 
      <option value="st louis, mo">St Louis</option> 
     </select> 
    </div> 
    <div id="map-canvas" style="float: left; width: 70%; height: 100%"> 
    </div> 
    <div id="directions-panel" style="float: right; width: 30%; height: 100%"> 
    </div> 
</body>

來源

2013-03-28 Bashnia007

給你的地圖一個固定的寬度和高度。 – Marcelo 2013-03-28 11:30:30

確保你已經設置的腳本src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false"右鍵，因爲我用我自己的鑰匙試了你的代碼，它的工作原理..如果你想要的calcRoute();功能頁面上被稱爲在初始化函數結束時只加入這一行calcRoute();

來源

2013-03-28 11:34:27

谷歌地圖API asp.net

回答

相關問題