Javascript 用于预定位置的地理定位API

大学作业让我非常头疼。基本上是：一个下拉菜单，列出三个著名的地方。当用户从下拉菜单中选择一个地方时，显示Google地图™ 该位置的条目

所以我已经创建了一个站点，我通过java编码将地图加载到lat/lan，但无法让其他部分（三个著名的地方）工作（实际上我甚至不知道如何）。这是我到目前为止得到的

正文

        <table class="table">
            <tr>
                <td width= "10%">
                    <div class="dropdown">
                        <select id = "sites">
                            <option value = "utt">UTT</option>
                            <option value = "CSB">CSB</option>
                            <option value = "TCB">TCB</option>
                        </select>
                    </div>
                </td>
                <td width="90%">
                    <div id="googleMap" style="width:150%;height:500px;"></div>
                </td>
            </tr>
        </table>
        </div>
        <script>
            function myMap() {
                var myCenter = new google.maps.LatLng();
                    var mapCanvas = document.getElementById("googleMap");
                    var mapOptions = {center: myCenter, zoom: 5};
                    var map = new google.maps.Map(mapCanvas, mapOptions);
                    var marker = new google.maps.Marker({position:myCenter});
                    marker.setMap(map);
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=mykey(haverealoneinactual)&callback=myMap"></script>
    </body>

UTT
公务员事务局
TCB
函数myMap（）{
var myCenter=new google.maps.LatLng（）；
var mapCanvas=document.getElementById（“谷歌地图”）；
var mapOptions={center:myCenter，zoom:5}；
var map=new google.maps.map（mapCanvas，mapOptions）；
var marker=new google.maps.marker（{position:myCenter}）；
marker.setMap（map）；
}

---

任何帮助都将不胜感激，因为我已经为此绞尽脑汁好几天了。

因为您使用的是谷歌地图，所以有很多API支持来解决这个问题，因为这是开发人员在早期阶段面临的常见问题

对于您的问题，我建议存储您希望在下拉列表中显示的位置Id，然后在用户选择任何位置时使用google API显示该位置的条目。 您可以参考以下代码：

function initialize() {
  // Create a map centered in Pyrmont, Sydney (Australia).
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8666, lng: 151.1958},
    zoom: 15
  });

  // Search for Google's office in Australia.
  var request = {
    location: map.getCenter(),
    radius: '500',
    query: 'Google Sydney'
  };

  var service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

// Checks that the PlacesServiceStatus is OK, and adds a marker
// using the place ID and location from the PlacesService.
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: results[0].place_id,
        location: results[0].geometry.location
      }
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

参考：

如果您想知道特定半径（附近）的三个著名位置，您可以使用：

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    type: ['restaurant']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

var映射；
var服务；
var信息窗口；
函数初始化（）{
var pyrmont=new google.maps.LatLng（-33.8665433151.1956316）；
map=new google.maps.map（document.getElementById（'map'）{
中心：皮尔蒙特，
缩放：15
});
var请求={
地点：皮尔蒙特，
半径：'500'，
类型：[“餐厅”]
};
服务=新的google.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

---

参考文献：

下面是一个关于我如何解决它的工作示例（添加api密钥）：

我不知道你需要在这个项目上走多远，但是对于你所要求的，就像每次你的下拉列表改变时加载一张带有每个地方坐标的新地图一样简单

var Drop = document.getElementById("wonders");

Drop.addEventListener("change", loadMap);

function loadMap() {
if (Drop.value == "University_of_Texas_Tower") {

    var myCenter = new google.maps.LatLng(30.2861584, -97.7415588);
    console.log(Drop.value);
    var mapCanvas = document.getElementById("googleMap");
    var mapOptions = {
        center: myCenter,
        zoom: 14
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({
        position: myCenter
    });
    marker.setMap(map);
} else if (Drop.value == "Congress_Street_Bridge") {
    var myCenter = new google.maps.LatLng(30.2718051, -97.7436219);
    console.log(Drop.value);
    var mapCanvas = document.getElementById("googleMap");
    var mapOptions = {
        center: myCenter,
        zoom: 14
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({
        position: myCenter
    });
    marker.setMap(map);
} else {
    var myCenter = new google.maps.LatLng(30.2746698, -97.7425392);
    console.log(Drop.value);
    var mapCanvas = document.getElementById("googleMap");
    var mapOptions = {
        center: myCenter,
        zoom: 14
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({
        position: myCenter
    });
    marker.setMap(map);
}
}

---

令人惊叹的！就这样，非常感谢。我想它应该是基于if/else语句的变量，但我一辈子都搞不清楚它是如何实现的。