个人中心
gpt4 book ai didi

javascript - 更新用户生成的标记的搜索结果

转载 作者：行者123 更新时间：2023-11-30 19:06:27 26 4
gpt4 key购买 nike

这在之前的问题 Google Maps: Resetting Markers with Coordinates 中已经有所涉及，所以我将尽我所能来简化这个问题。 (我很抱歉再次访问这个，但我或多或少地破坏了我的 map ，或者在尝试引用函数 createMarkers(places) 时没有得到任何结果，所以我使用之前回答的版本，因为没有那个问题。)

我正在开发一个基于 Google map 的 HTML 程序，该程序根据输入的经纬度以及其他几个“用户位置”提供位置标记；手动输入的橙色标记。结果显示在右侧，底部有一个表格，告诉您位置总数以及用户位置和用户总数。

enter image description here

但是，问题是我可以搜索要更新的橙色标记。与 nearbySearch 关联的蓝色标记将更新，但底部的表格无法识别纬度和经度的变化，也无法识别橙色标记的添加或删除。

enter image description here

请注意底部表格中唯一发生变化的是地点数量变为 10(因为 API 的 nearbySearch 函数)，但用户地点和用户总数没有改变。

我需要帮助让表格根据纬度和经度的变化更新用户位置。更新纬度和经度会很好，但在宏伟的计划中这并不重要，更新用户位置和总用户数是其中唯一真正重要的事情。一旦发生这种情况，该计划将或多或少地完成。

用户标记可以在函数 createMarkers(places) 中找到，所以我相当确定多次调用该函数并且很可能很明显调用该函数时的结果是使其工作的关键。我只是没能成功地做到这一点，所以如果是这样的话，我可能完全错了。

下面提供了完整的代码，应该可以正常运行，但您需要自己的 Google Maps API key 。

<!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=MY_API_KEY&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>
</body>
</html>

最佳答案

我不确定您要对硬编码标记做什么，或者您希望它们如何更新，但对于底部面板，您可以执行以下操作。

首先，要更新显示的纬度/经度，请使用全局 lat 和 lng 变量，而不是创建新变量。

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

  map.setCenter({
    lat: lat,
    lng: lng
  });

  ...

然后，在每次新的附近搜索时重置 userLoc 和 userCount 变量。

function nearbySearch() {
  userLoc = 0;
  userCount = 0;

  ...

现在创建一个更新 HTML 的新函数(并从您的 createMarkers 函数中删除此代码)。

function updateBottomTable() {
  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 + ".";
}

最后在nearbySearch之后调用，不管状态是否OK:

function(results, status, pagination) {
  if (status === 'OK') {
    createMarkers(results);
    moreButton.disabled = !pagination.hasNextPage;
    getNextPage = pagination.hasNextPage && function() {
      pagination.nextPage();
    };
  }
  updateBottomTable();
});

另请注意，在此处使用 AND 运算符并删除始终设置为 0 的停止变量更有意义。例如:

if ((lat > 40.78076 && lat < 41.58076) && (lng > -73.60537 && lng < -72.80537)) {

希望对你有帮助!

关于javascript - 更新用户生成的标记的搜索结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58939287/

26 4 0
文章推荐： c - fork() 生成的子进程中的部分代码被跳过
文章推荐： c - GCC 预编译器宏 ## ，与另一个宏的标记连接
文章推荐： c++ - 获取 C++ 引用的地址以传递给指针
文章推荐： c - 使用递归的解决方案数量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com