Question

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

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

Answer 1

您的代码中有两个错误：

错误＃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>

使用Google地图

1 个答案: