使用谷歌地圖

-2

我正在使用我的網站上的Google地圖，並且我希望Google Map帶有用戶界面，即當用戶選擇位置時，按下提交按鈕後地圖應該顯示位置。爲此我編寫了一個代碼。但它不能正常工作。任何人都可以幫助我正確編寫代碼來正常工作嗎？使用谷歌地圖

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js? 
sensor=false"></script> 
<script type="text/javascript"> 

     function initialize() { 
     var latlng = new google.maps.LatLng(0, 0); 
     var myOptions = { 
       zoom: 1, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
     position: latlng, 
     map: map, 
      }); 
    } 

function selectedLocation() { 
var selected = document.getElementById("location").value; 
    if (selected == "Location 1") { 
     var location1 = new google.maps.LatLng(48.017, 37.914); 
     map.setCenter(location1); 
     map.setZoom(12); 
} 
else if (selected == "Location 2") { 
     var location2 = new google.maps.LatLng(50.269, 28.665); 
     map.setCenter(location2); 
     map.setZoom(12); 
} 
} 
</script> 
</head> 
<body onload="initialize()"> 

    <p> 
     <form action="#" > 
    <select id="location"> 
     <option value="None">-</option> 
     <option value="Location 1">Location 1</option> 
     <option value="Location 2">Location 2</option> 
    </select> 
<button type="button" onclick="selectedLocation()">submit</button> 
</form> 
    </p> 
    <div id="map_canvas" style="width:600px; height:400px"></div> 
</body> 
</html>

來源

2012-05-11 Chandan M

定義「工作不正常」。 –

你在你的代碼中有兩處錯誤：

錯誤＃1 你似乎有複製/粘貼錯誤，因此你有選擇的片段（見下文星號之間）：

var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
     **position: latlng, 
     map: map, 
      });**

錯誤＃2 你必須與你的map變量相關範圍的問題。它應該是全局的，所以你應該在初始化函數之外聲明它。下面

工作代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js? 
sensor=false"></script> 
<script type="text/javascript"> 
var map; 
     function initialize() { 
     var latlng = new google.maps.LatLng(0, 0); 
     var myOptions = { 
       zoom: 1, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    } 

function selectedLocation() { 
var selected = document.getElementById("location").value; 
    if (selected == "Location 1") { 
     var location1 = new google.maps.LatLng(48.017, 37.914); 
     map.setCenter(location1); 
     map.setZoom(12); 
} 
else if (selected == "Location 2") { 
     var location2 = new google.maps.LatLng(50.269, 28.665); 
     map.setCenter(location2); 
     map.setZoom(12); 
} 
} 
</script> 
</head> 
<body onload="initialize()"> 

    <p> 
     <form action="#" > 
    <select id="location"> 
     <option value="None">-</option> 
     <option value="Location 1">Location 1</option> 
     <option value="Location 2">Location 2</option> 
    </select> 
<button type="button" onclick="selectedLocation()">submit</button> 
</form> 
    </p> 
    <div id="map_canvas" style="width:600px; height:400px"></div> 
</body> 
</html>

來源

2012-05-11 05:42:29 andresf

使用谷歌地圖

回答

相關問題