Google 地图：通过多个输入字段设置标记

Question

如何根据地址输入更改标记的位置？我知道谷歌地点自动完成功能可以完成这项工作，但要求是在填写地址表格后更新地图标记。

JS Fiddle 可以在这里找到： http://jsfiddle.net/fhft7bfg/2/

HTML：

<input id="route" placeholder="Street"></input>
<input id="locality" placeholder="City"></input>
<input id="administrative_area_level_1" placeholder="State"></input>
<input id="postal_code" placeholder="Postal Code"></input>
<input id="country" placeholder="Country"></input>
<div id="map-canvas"></div>

JS：

function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

1. 使地图和标记全局化
2. 修改

   Google 的简单地理编码器示例

   中的 codeAddress 函数以使用表单元素并移动标记（如果已存在）。

工作小提琴

工作代码片段：

// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
var geocoder = new google.maps.Geocoder();
function codeAddress() {
    var street = document.getElementById("route").value;
    var city = document.getElementById("locality").value;
    var state = document.getElementById("administrative_area_level_1").value;
    var postcode = document.getElementById("postal_code").value;
    var country = document.getElementById("country").value;
var address = street +"," + city + "," + state +"," + postcode + "," + country;    
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
        if (marker && marker.setPosition) {
            marker.setPosition(results[0].geometry.location);
        } else {
      marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
        }
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

// global variables
var marker;
var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
      zoom: 4,
      center: myLatlng
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    // To add the marker to the map, use the 'map' property
    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Hello World!"
    });
}

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

input{display:block}

#map-canvas{background:#ccc; width:500px; height:300px}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="route" placeholder="Street" value="Beacon St"></input>

<input id="locality" placeholder="City" value="Boston"></input>

<input id="administrative_area_level_1" placeholder="State" value="MA"></input>

<input id="postal_code" placeholder="Postal Code" value="02215"></input>

<input id="country" placeholder="Country" value="US"></input>
<input id="geocode" type="button" onclick="codeAddress();" value="geocode"/>
<div id="map-canvas"></div>