Google 地图：使用坐标重置标记

Question

我正在开发 Google 地图 API 程序，该程序提供基于经度和纬度以及用户给定位置的 nearbySearch 功能。它几乎完全按预期工作，但最后一个部分我遇到了很多麻烦，那就是重置标记。这是代码最初运行时的屏幕截图，搜索按预期工作，您可以在右侧看到结果，并且有一个部分显示用户位置（o运行ge 标记）和数量绑定到这些位置的用户：

但是当用户输入纬度和经度时，地图会更新，但其他不会。

我认为可能有帮助，而且似乎可以关闭的是为 initMap 函数设置一个 if else 语句，并通过提交按钮的 onclick 函数将其更改为 false，从而改变开始lat & lng 与用户 lat & lng:

function initMap() {
// Create the map.
if (true)
var SHU = {
lat: lat,
lng: lng
}
else {
  var SHU = {
  lat: newLatlat,
  lng: newLng
}};

但是弄乱了提交的onclick函数最终破坏了代码的其他方面，所以我来寻求帮助。这是代码，它应该运行没有问题，但您可能需要一个自己的 API 密钥。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Base Mapper</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style id="compiled-css" type="text/css">
#map {
height: 100%;
}

html,
body {
height: 100%;
margin: 0;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffd1b2
}

#right-panel {
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}

#right-panel select,
#right-panel input {
font-size: 15px;
}

#right-panel select {
width: 100%;
}

#right-panel i {
font-size: 12px;
}

#right-panel {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
right: 5px;
top: 60%;
margin-top: -395px;
height: 650px;
width: 200px;
padding: 10px;
padding-left: 10px;
z-index: 10;
border: 1px solid #999;
background: #fff;
}

h2 {
font-size: 23px;
margin: 0 0 5px 0;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
height: 580px;
width: 200px;
overflow-y: scroll;
}

li {
background-color: #ffc965;
padding: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

li:nth-child(odd) {
background-color: #fff065;
}

#more {
width: 100%;
margin: 5px 0 0 0;
}

input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #ffefe5
}

.container {
border-radius: 5px;
background-color: #ffd1b2
padding: 80px;
width: 80%
}
button {
width: 100%;
background-color: #8f20b6;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #cba00d;
}
table {
width: 100%;
background-color: #8f20b6;
color: white;
padding: 25px 0px;
margin: 8px 0;
border: none;
cursor: pointer;
}

</style>
</head>
<body>
<div class="container">
<form id="mapCenterForm" action="" onsubmit="return false;">
<label for="latitude">lat</label>
<input type="text" id="lat" name="latitude" placeholder="0.000000">

<label for="longitude">lng</label>
<input type="text" id="lng" name="longitude" placeholder="0.000000">
<br>
<button onclick="change_center(); return false">
Submit
</button>
</form>
<div id="map" style="height: 500px"></div>

</div>
<div id="right-panel">
<h2>Locations</h2>
<div id="number_results"></div>
<ul id="places"></ul>
<button id="more">More Results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIza...&callback=initMap" async defer></script>

<script type="text/javascript">


var blue_icon = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
var orange_icon = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
var map;
var lat = 41.18076;
var lng = -73.20537;
var userLoc = 0;
var userCount = 0;
var stopper = 1;

function initMap() {
// Create the map.
if (true)
var SHU = {
lat: lat,
lng: lng
}
else {
  var SHU = {
  lat: newLatlat,
  lng: newLng
}};
map = new google.maps.Map(document.getElementById('map'), {
center: SHU,
zoom: 13
});

google.maps.event.addListener(map, 'click', function(e) {
document.getElementById('lat').value = e.latLng.lat();
document.getElementById('lng').value = e.latLng.lng();
})

// Create the places service.
var service = new google.maps.places.PlacesService(map);
var getNextPage = null;
var moreButton = document.getElementById('more');
moreButton.onclick = function() {
moreButton.disabled = true;
if (getNextPage) getNextPage();
};

service.nearbySearch({
location: SHU,
radius: 4000,
keyword: "(library) OR (hospital)"
},

function(results, status, pagination) {
if (status !== 'OK') return;

createMarkers(results);
moreButton.disabled = !pagination.hasNextPage;
getNextPage = pagination.hasNextPage && function() {
pagination.nextPage();
};
});
}

function createMarkers(places) {
  var harry = new google.maps.Marker({
      position: {lat: 41.18076, lng: -73.20537},
      map: map,
      icon: orange_icon,
      title: 'Harry & Martha Richardson'
    })
      if (((lat>40.78076&&lat<41.58076)||(lng>-73.60537&&lng<-72.80537))&&(stopper==1))
      { userLoc = userLoc+1
        userCount = userCount+2 };
  var Maria = new google.maps.Marker({
      position: {lat: 41.14055, lng: -73.26827},
      map: map,
      icon: orange_icon,
      title: 'Maria Blane'
    })
      if (((lat>40.74055&&lat<41.54055)||(lng>-74.00537&&lng<-73.20537))&&(stopper==1))
      { userLoc = userLoc+1
        userCount = userCount+1};
  var Kent = new google.maps.Marker({
      position: {lat: 41.19613, lng: -73.21837},
      map: map,
      icon: orange_icon,
      title: 'Kent, Pedro, Natasha'
    })
      if (((lat>40.79613&&lat<41.59613)||(lng>-73.61837&&lng<-72.81837))&&(stopper==1))
        { userLoc = userLoc+1
          userCount = userCount+3 };
  var DummyVar1 = new google.maps.Marker({
      position: {lat: 38.897957, lng: -77.036560},
      map: map,
      icon: orange_icon,
      title: 'Dummy Name'
    })
      if (((lat>38.497957&&lat<39.297957)||(lng>-77.43656&&lng<-76.63656))&&(stopper==1))
        { userLoc = userLoc+1
          userCount = userCount+100 };
  var DummyVar2 = new google.maps.Marker({
      position: {lat: 36.056595, lng: -112.125092},
      map: map,
      icon: orange_icon,
      title: 'Dummier Name'
    })
      if ((lat>35.656595&&lat<36.456595)||(lng>-112.525092&&lng<-111.725092))
        { userLoc = userLoc+1
          userCount = userCount+100
          };
    { stopper = 0 };
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');

for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

var marker = new google.maps.Marker({
map: map,
icon: blue_icon,
title: place.name,
position: place.geometry.location
});

var li = document.createElement('li');
li.textContent = place.name;
placesList.appendChild(li);
document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng +
", the total places found is: " + (document.getElementById('places').children.length) + ". User locations: " + userLoc + ". Total users: " + userCount + ".";
}
function change_center() {
var newLat = parseFloat(document.getElementById("lat").value);
var newLng = parseFloat(document.getElementById("lng").value);

map.setCenter({
lat: newLat,
lng: newLng
});
return false;
}

</script>

<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "r96szuhx"
}], "*")
}

// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>

<table>
<tr>
<th id="val"></th>
</tr>
</table>
</body>
</html>

Answer 1

当地图中心发生变化时，您需要重新运行查询。我建议将该查询放入一个函数中，您可以在这两个地方调用（并跟踪标记，以便您可以在开始新查询时删除它们）：

function nearbySearch() {
  document.getElementById('places').innerHTML = "";
  for (var i=0; i<markers.length;i++) {
    markers[i].setMap(null);
  }
  markers = [];
  // Create the places service.
  var service = new google.maps.places.PlacesService(map);
  var getNextPage = null;
  var moreButton = document.getElementById('more');
  moreButton.onclick = function() {
    moreButton.disabled = true;
    if (getNextPage) getNextPage();
  };

  service.nearbySearch({
    location: map.getCenter(),
    radius: 4000,
    keyword: "(library) OR (hospital)"
  },

  function(results, status, pagination) {
    if (status !== 'OK') return;

    createMarkers(results);
    moreButton.disabled = !pagination.hasNextPage;
    getNextPage = pagination.hasNextPage && function() {
      pagination.nextPage();
    };
  });
}

工作代码片段：

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffd1b2
}

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -395px;
  height: 650px;
  width: 200px;
  padding: 10px;
  padding-left: 10px;
  z-index: 10;
  border: 1px solid #999;
  background: #fff;
}

h2 {
  font-size: 23px;
  margin: 0 0 5px 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 580px;
  width: 200px;
  overflow-y: scroll;
}

li {
  background-color: #ffc965;
  padding: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

li:nth-child(odd) {
  background-color: #fff065;
}

#more {
  width: 100%;
  margin: 5px 0 0 0;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #ffefe5
}

.container {
  border-radius: 5px;
  background-color: #ffd1b2 padding: 80px;
  width: 80%
}

button {
  width: 100%;
  background-color: #8f20b6;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #cba00d;
}

table {
  width: 100%;
  background-color: #8f20b6;
  color: white;
  padding: 25px 0px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
}

<div class="container">
  <form id="mapCenterForm" action="" onsubmit="return false;">
    <label for="latitude">lat</label>
    <input type="text" id="lat" name="latitude" placeholder="0.000000">

    <label for="longitude">lng</label>
    <input type="text" id="lng" name="longitude" placeholder="0.000000">
    <br>
    <button onclick="change_center(); return false">
Submit
</button>
  </form>
  <div id="map" style="height: 500px"></div>

</div>
<div id="right-panel">
  <h2>Locations</h2>
  <div id="number_results"></div>
  <ul id="places"></ul>
  <button id="more">More Results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

<script type="text/javascript">
  var blue_icon = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
  var orange_icon = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
  var map;
  var lat = 41.18076;
  var lng = -73.20537;
  var userLoc = 0;
  var userCount = 0;
  var stopper = 1;
  var markers = [];

  function initMap() {
    // Create the map.
    var SHU = {
      lat: lat,
      lng: lng
    }
    map = new google.maps.Map(document.getElementById('map'), {
      center: SHU,
      zoom: 13
    });

    google.maps.event.addListener(map, 'click', function(e) {
      document.getElementById('lat').value = e.latLng.lat();
      document.getElementById('lng').value = e.latLng.lng();
    })

    nearbySearch();
  }

  function createMarkers(places) {
    var harry = new google.maps.Marker({
      position: {
        lat: 41.18076,
        lng: -73.20537
      },
      map: map,
      icon: orange_icon,
      title: 'Harry & Martha Richardson'
    })
    if (((lat > 40.78076 && lat < 41.58076) || (lng > -73.60537 && lng < -72.80537)) && (stopper == 1)) {
      userLoc = userLoc + 1
      userCount = userCount + 2
    };
    var Maria = new google.maps.Marker({
      position: {
        lat: 41.14055,
        lng: -73.26827
      },
      map: map,
      icon: orange_icon,
      title: 'Maria Blane'
    })
    if (((lat > 40.74055 && lat < 41.54055) || (lng > -74.00537 && lng < -73.20537)) && (stopper == 1)) {
      userLoc = userLoc + 1
      userCount = userCount + 1
    };
    var Kent = new google.maps.Marker({
      position: {
        lat: 41.19613,
        lng: -73.21837
      },
      map: map,
      icon: orange_icon,
      title: 'Kent, Pedro, Natasha'
    })
    if (((lat > 40.79613 && lat < 41.59613) || (lng > -73.61837 && lng < -72.81837)) && (stopper == 1)) {
      userLoc = userLoc + 1
      userCount = userCount + 3
    };
    var DummyVar1 = new google.maps.Marker({
      position: {
        lat: 38.897957,
        lng: -77.036560
      },
      map: map,
      icon: orange_icon,
      title: 'Dummy Name'
    })
    if (((lat > 38.497957 && lat < 39.297957) || (lng > -77.43656 && lng < -76.63656)) && (stopper == 1)) {
      userLoc = userLoc + 1
      userCount = userCount + 100
    };
    var DummyVar2 = new google.maps.Marker({
      position: {
        lat: 36.056595,
        lng: -112.125092
      },
      map: map,
      icon: orange_icon,
      title: 'Dummier Name'
    })
    if ((lat > 35.656595 && lat < 36.456595) || (lng > -112.525092 && lng < -111.725092)) {
      userLoc = userLoc + 1
      userCount = userCount + 100
    }; {
      stopper = 0
    };
    var bounds = new google.maps.LatLngBounds();
    var placesList = document.getElementById('places');

    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      var marker = new google.maps.Marker({
        map: map,
        icon: blue_icon,
        title: place.name,
        position: place.geometry.location
      });
      markers.push(marker);

      var li = document.createElement('li');
      li.textContent = place.name;
      placesList.appendChild(li);
      document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
      bounds.extend(place.geometry.location);
    }
    map.fitBounds(bounds);
    document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng +
      ", the total places found is: " + (document.getElementById('places').children.length) + ". User locations: " + userLoc + ". Total users: " + userCount + ".";
  }

  function change_center() {
    var newLat = parseFloat(document.getElementById("lat").value);
    var newLng = parseFloat(document.getElementById("lng").value);

    map.setCenter({
      lat: newLat,
      lng: newLng
    });
    nearbySearch();
    return false;
  }

  function nearbySearch() {
    document.getElementById('places').innerHTML = "";
    for (var i=0; i<markers.length;i++) {
      markers[i].setMap(null);
    }
    markers = [];
    // Create the places service.
    var service = new google.maps.places.PlacesService(map);
    var getNextPage = null;
    var moreButton = document.getElementById('more');
    moreButton.onclick = function() {
      moreButton.disabled = true;
      if (getNextPage) getNextPage();
    };

    service.nearbySearch({
        location: map.getCenter(),
        radius: 4000,
        keyword: "(library) OR (hospital)"
      },

      function(results, status, pagination) {
        if (status !== 'OK') return;

        createMarkers(results);
        moreButton.disabled = !pagination.hasNextPage;
        getNextPage = pagination.hasNextPage && function() {
          pagination.nextPage();
        };
      });
  }
</script>

<table>
  <tr>
    <th id="val"></th>
  </tr>
</table>

Google 地图：使用坐标重置标记

Google Maps: Resetting Markers with Coordinates

html

api

google-maps

marker