Question

大学的作业让我头疼不已。基本上：一个下拉菜单，列出了三个着名的地方。当用户从下拉菜单中选择一个地点时，请显示该地点的Google Maps™条目。

所以我已经创建了一个网站，我已经通过java编码将地图加载到lat / lan但是不能让其他部分（三个着名的地方）位工作（实际上我可以＆＃t; t甚至弄清楚如何）。这是我到目前为止所得到的。

文本

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

任何帮助都会非常感激，因为我已经花了好几天在脑上绞尽脑汁。

Answer 1

当您使用谷歌地图时，因此有很多支持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);

参考：https://developers.google.com/places/place-id

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

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

参考：https://developers.google.com/maps/documentation/javascript/places

Answer 2

以下是我如何解决它的一个工作示例（添加api密钥）：http://jsbin.com/jazijig/1/edit?html,css,js,output

我不知道您需要在多大程度上使用这个项目，但是对于您的要求就像每次下拉更改都会在每个地点的坐标上加载新地图一样简单。

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

用于预定位置的GeoLocation API

2 个答案: