如何显示来自 select 选项值的标记？

Question

代码只处理地址变量。所以在 select 中选项值有多个地址。

function geocodeAddress(geocoder, resultsMap) {   
                var address = document.getElementById('Select').value;   
                 for(i = 0; i < address.length;i++){   
                 geocoder.geocode({'address': address[i]}, function(results, status) {
                            if (status === google.maps.GeocoderStatus.OK) {
                             // resultsMap.setCenter(results[0].geometry.location);


                              var marker = new google.maps.Marker({
                                map: resultsMap,
                                position: results[i].geometry.location
                              });
                              markers.push(marker);
                            } else {
                              alert('Geocode was not successful for the following reason: ' + status);
                            }   
                        });   
                       }
                    }

Answer 1

修改自相关问题： Google Maps : change map marker location on dropdown

var geocoder;
var map;
var geoMarker;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geoMarker = new google.maps.Marker();
  geoMarker.setPosition(map.getCenter());
  geoMarker.setMap(map);
  var txtArray = $("#location option").each(function() {
    console.log($(this).text());
    geocodeAddress($(this).text());
  });
  $("#location").change(function() {
    var addr = ($('#location :selected').text());
    console.log(addr);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': addr
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0].geometry.viewport) {
          map.fitBounds(results[0].geometry.viewport);
        } else if (results[0].geometry.bounds) {
          map.fitBounds(results[0].geometry.bounds);
        } else {
          map.setCenter(results[0].geometry.location);
        }
      } else {
        alert("Error geocoding address: " + address + "status=" + status);
      }
    });
  });

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

function geocodeAddress(address) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
        title: address
      });
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
    } else {
      alert("Error geocoding address: " + address + "status=" + status);
    }
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="location">
  <option>New York, NY</option>
  <option>Newark, NJ</option>
  <option>Philadelphia, PA</option>
</select>
<div id="map_canvas"></div>

如何显示来自 select 选项值的标记？

How to display markers from select option values?

google-maps-api-3

option