-2

我在我的网站中使用谷歌地图，我希望谷歌地图带有用户界面，即当用户选择位置并按下提交按钮后，地图应该显示位置。为此，我编写了一个代码。但它不能正常工作。任何人都可以帮助我正确编写此代码以正常工作吗？

<!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>
4

1 回答 1

1

您的代码中有两个错误：

错误 #1 您似乎有一个复制/粘贴错误，因此您有一个选项片段（见下文星号之间）：

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

错误 #2map您的变量 关联范围存在问题。它应该是全局的，因此您应该在初始化函数之外声明它。

下面的工作代码：

<!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-11T05:42:29.403 回答