谷歌地图：用坐标重置标记

【问题标题】：Google Maps: Resetting Markers with Coordinates谷歌地图：用坐标重置标记
【发布时间】：2020-03-14 04:30:23
【问题描述】：

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

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

我认为可能会有所帮助，而且似乎已经很接近的事情是为 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>

【问题讨论】：

    标签： html api google-maps marker


    【解决方案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();
    };
  });
}

    工作代码 sn-p：

    #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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2019-10-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-05
      • 1970-01-01
      • 2015-02-05
      • 2012-10-18
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode