进行地理编码搜索时只允许一个标记

Question

我想允许用户输入地址并在地图上显示他们的位置。我使用Google Maps API按照instructions provided。

执行此操作

它可以工作，但我只想在地图上一次允许一个地图标记。我尝试按照this answer中的说明操作，但它给了我一个错误：InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

如何在Google提供的示例中保持相同的行为，一次只允许一个标记？

以下是将Google代码与SO答案I链接到以下内容的代码：

var marker;

function placeMarker(location) {
    if (marker) {
        //if marker already was created change positon
        marker.setPosition(location);
    } else {
        //create a marker
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }
}

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {lat: 39.8282, lng: -98.5795}
    });
    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
        geocodeAddress(geocoder, map);
    });
}

function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address').value;
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          resultsMap.setCenter(results[0].geometry.location);
             /* ORIGINAL GOOGLE CODE COMMENTED OUT TO TRY AND PREVENT MULTIPLE MARKERS
             var marker = new google.maps.Marker({
                map: resultsMap,
                position: results[0].geometry.location
              });*/
          //CODE ADDED IN PLACE OF GOOGLE CODE THAT REFERENCES FUNCTION ABOVE
              placeMarker(results[0].geometry.location);
        } else {
          alert('We could not locate your location for the following reason: ' + status);
        }
    });
}

Answer 1

您的map变量是initMap函数的本地变量。您有两种方法可以解决问题：

1. 让它全球化
2. 将其传递给placeMarker函数

#1 proof of concept fiddle (make the map variable global)

代码段

＆＃13;
＆＃13;
var marker;
var map;  // global map variable

function placeMarker(location) {
  if (marker && marker.setPosition) {
    //if marker already was created change positon
    marker.setPosition(location);
  } else {
    //create a marker
    marker = new google.maps.Marker({
      position: location,
      map: map,
      draggable: true
    });
  }
}

function initMap() {
  // no "var" here, initialize the global map variable
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 39.8282,
      lng: -98.5795
    }
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
}
google.maps.event.addDomListener(window, "load", initMap);

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      placeMarker(results[0].geometry.location);
    } else {
      alert('We could not locate your location for the following reason: ' + status);
    }
  });
}
＆＃13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="text" id="address" value="Boston, MA" />
<input type="button" id="submit" value="submit" />
<div id="map"></div>
＆＃13;
＆＃13;
＆＃13;

#2 proof of concept fiddle (pass the map variable into the placeMarker function)

代码段

＆＃13;
＆＃13;
var marker;

function placeMarker(location, map) {
  if (marker && marker.setPosition) {
    //if marker already was created change positon
    marker.setPosition(location);
  } else {
    //create a marker
    marker = new google.maps.Marker({
      position: location,
      map: map,
      draggable: true
    });
  }
}

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 39.8282,
      lng: -98.5795
    }
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
}
google.maps.event.addDomListener(window, "load", initMap);

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      placeMarker(results[0].geometry.location, resultsMap);
    } else {
      alert('We could not locate your location for the following reason: ' + status);
    }
  });
}
＆＃13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="text" id="address" value="Boston, MA" />
<input type="button" id="submit" value="submit" />
<div id="map"></div>
＆＃13;
＆＃13;
＆＃13;