javascript - Google Maps API 下拉列表，缩放至标记

我使用的是 Google Maps API v3，我有一张带有一些标记的简单 map 。我还有一个下拉列表。我需要最少的代码来完成这项工作。我想在下拉列表中选择一个标记，然后将选定的标记平移到它。我已经尝试了所有方法并在网上查看，我发现事情很接近，但到目前为止没有任何效果，到目前为止非常沮丧。请帮助!这是片段:

我需要弄清楚如何让它工作

<!DOCTYPE html> <!-- saved from url=(0014)about:internet  -->    
<html>
  <head>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
    </script>
    <br>
    <script>
        var geocoder;
        var directionsService;
        var directionsDisplay;
        //Start of code (above is framework)  
      function initialize() {
        var myLatLng = new google.maps.LatLng(41.682, -100.103);
        var mapOptions = {
          zoom: 5,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        //Map Framework above
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options

        //google.maps.event.addDomListener(document.getElementById('SelectList'),
        //  'change', function() {}
        //var mypos = document.getElementById('SelectList').value;

        // Marker2 (Red - default marker color)
            var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
            var contentString2 = '<div id="content">'+
            var infowindow2 = new google.maps.InfoWindow({
            content: contentString2
            });

            var marker2 = new google.maps.Marker({
            position: latLng2,
            icon: src='http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
            //new google.maps.Size(42,68)
            //size: (12, 10),
            //position: mypos,
            map: map,
            title: "marker ...)" //hover 
            });


            google.maps.event.addListener(marker2, 'click', function() {
            infowindow2.open(map, marker2);

            });

            //moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

        // End code for Marker 2
        // Start of Marker3 (Yellow - marker color)
            var latLng3 = new google.maps.LatLng(44.021778, -96.052417); 
            var contentString3 = '<div id="content">'+
            var infowindow3 = new google.maps.InfoWindow({
            content: contentString3
            });

            var marker3 = new google.maps.Marker({
            position: latLng3,
            icon: src='http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
            map: map,
            title: "Marker ..."   
            });

            google.maps.event.addListener(marker3, 'click', function() {
            infowindow3.open(map, marker3);
            });

        // End for Marker 3
        // Start of Marker4 (Green - marker color)
            var latLng4 = new google.maps.LatLng(43.881690, -95.922869); 
            var contentString4 = '<div id="content">'+
            var infowindow4 = new google.maps.InfoWindow({
            content: contentString4
            });

            var marker4 = new google.maps.Marker({
            position: latLng4,
            icon: src='http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
            map: map,
            title: "marker ..."   
            });

            google.maps.event.addListener(marker4, 'click', function() {
            infowindow4.open(map, marker4);
            });

            var infowindow4 = new google.maps.InfoWindow({
            content: contentString4
            });
            google.maps.event.addListener(marker4, 'click', function() {
            infowindow4.open(map, marker4);
            });
            // End code for Marker 3

            });

</script> 
</head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:80%; height:95%"></div>
        <br>
        <div style="position: absolute; right: 25px; top: 15px; padding: 10px 10px 10px 10px;">
        <h3><u>Marker List by area</u></h3>
        </div>
        <br>
        <div style="position: absolute; right: 25px; top: 165px; padding: 10px 10px 10px 10px;"> 
        <form>
           <fieldset>
              <legend><b>Region 1</b></legend>
              <p>
             <label><b>Marker List</b></label>
             <select id = "myList3">
               <option value = "9">Marker 1</option>
               <option value = "10">Marker 2</option>
               <option value = "11">Marker 3</option>
               <option value = "12">Marker 4</option>
             </select>
              </p>
           </fieldset>
        </form></div>
    </body>
</html>

最佳答案

您需要将标记存储在别处，并在下拉列表更改时识别它们。像这样 Hook 你的下拉菜单:onchange="dropdownChanged()"

您的代码应如下所示:

    <script >
        var geocoder;
        var directionsService;
        var directionsDisplay;
        var markers = [];
        var map;
        //Start of code (above is framework)  
        function initialize() {
            var myLatLng = new google.maps.LatLng(41.682, -100.103);
            var mapOptions = {
                zoom: 5,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            //Map Framework above
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options

            //google.maps.event.addDomListener(document.getElementById('SelectList'),
            //  'change', function() {}
            //var mypos = document.getElementById('SelectList').value;

            // Marker2 (Red - default marker color)
            var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
            var contentString2 = '<div id="content">';
            var infowindow2 = new google.maps.InfoWindow({
                content: contentString2
            });

            var marker2 = new google.maps.Marker({
                position: latLng2,
                icon: src = 'http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
                //new google.maps.Size(42,68)
                //size: (12, 10),
                //position: mypos,
                map: map,
                title: "marker ...)" //hover 
            });

            markers[10] = marker2;

            google.maps.event.addListener(marker2, 'click', function () {
                infowindow2.open(map, marker2);

            });

            //moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

            // End code for Marker 2
            // Start of Marker3 (Yellow - marker color)
            var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
            var contentString3 = '<div id="content">';
            var infowindow3 = new google.maps.InfoWindow({
                content: contentString3
            });

            var marker3 = new google.maps.Marker({
                position: latLng3,
                icon: src = 'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
                map: map,
                title: "Marker ..."
            });
            markers[11] = marker3;

            google.maps.event.addListener(marker3, 'click', function () {
                infowindow3.open(map, marker3);
            });

            // End for Marker 3
            // Start of Marker4 (Green - marker color)
            var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
            var contentString4 = '<div id="content">';
            var infowindow4 = new google.maps.InfoWindow({
                content: contentString4
            });

            var marker4 = new google.maps.Marker({
                position: latLng4,
                icon: src = 'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
                map: map,
                title: "marker ..."
            });
            markers[12] = marker4;

            google.maps.event.addListener(marker4, 'click', function () {
                infowindow4.open(map, marker4);
            });

            var infowindow4 = new google.maps.InfoWindow({
                content: contentString4
            });
            google.maps.event.addListener(marker4, 'click', function () {
                infowindow4.open(map, marker4);
            });
            // End code for Marker 3

        }

        function dropdownChanged()
        {
            var index = document.getElementById("myList3").value;
            var marker = markers[index];
            var position = marker.getPosition();
            map.setCenter(position);
        }

</script>

编辑 2 ** 以下是如何将选择 Hook 到 dropdownChanged

<select id = "myList3" onchange="dropdownChanged();">
               <option value = "9">Marker 1</option>
               <option value = "10">Marker 2</option>
               <option value = "11">Marker 3</option>
               <option value = "12">Marker 4</option>
             </select>

编辑 1 * 根据您在下面的评论，如果您想从下拉列表中更新位置，您只需直接从下拉列表中调用函数 panTo(x,y)

<script>
function panTo(x,y)
{
   var position = new google.maps.LatLng(x,y);
   map.setCenter(position);
} 
</script>

关于javascript - Google Maps API 下拉列表，缩放至标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18658731/

javascript - Google Maps API 下拉列表，缩放至标记

上一篇：html - 在页眉中心对齐 Logo

下一篇：css - jQuery Mobile 尺寸太小，无法在设备中正常工作