如何从 Google Maps v3 API 中删除带有 mysql 数据的标记？
Posted
技术标签:
【中文标题】如何从 Google Maps v3 API 中删除带有 mysql 数据的标记？【英文标题】：how to remove markers with mysql data from Google Maps v3 API? 【发布时间】：2016-05-10 08:36:26 【问题描述】：我刚刚按照此链接上的步骤操作：Google Map API - Removing Markers
我使用 google maps v3 api 创建了一个搜索功能来显示标记，当单击标记时，它将显示居民数据及其方向数据。问题是我无法删除之前搜索过的加载标记。
任何建议、想法和帮助将不胜感激！
JS 代码：
$("#searchDataToMarker").on('keydown', function()
document.getElementById('directionsDiv').innerhtml = "";
document.getElementById('residentInfoDiv').innerHTML = "";
document.getElementById('dataTitle').innerHTML = "";
var value = $(this).val();
var marker;
var markers = [];
$.ajax(
type: "POST",
url: window.location.origin + "/Map/mapSearchDataInMarker",
data:
'searchDataToMarker': value
,
dataType: "JSON",
success: function(searchMapDataResults)
clearMarkers();
removeMarkers();
deleteMarkers();
if (searchMapDataResults.length === 0 || $("#searchDataToMarker").val() === null)
document.getElementById('directionsDiv').innerHTML = "";
document.getElementById('residentInfoDiv').innerHTML = "";
document.getElementById('dataTitle').innerHTML = "";
// google.maps.trigger(map, 'resize');
$.bootstrapGrowl("<h4><strong>Resident not found!</strong></h4> <p>Search result empty!</p>",
type: "warning",
delay: 2500,
width: "auto",
allow_dismiss: true,
offset:
from: 'top',
amount: 20
);
return;
else
clearMarkers();
removeMarkers();
deleteMarkers();
var directionsDisplay = new google.maps.DirectionsRenderer(
suppressMarkers: true
);
var directionsService = new google.maps.DirectionsService;
var myCenter = new google.maps.LatLng(7.285764, 125.680568);
google.maps.event.addListenerOnce(map, 'tilesloaded', function()
$(this.getDiv()).animate(
opacity: 1
);
);
for (var i = 0, length = searchMapDataResults.length; i < length; i++)
var iw = new google.maps.InfoWindow();
var data = searchMapDataResults[i];
var latlong = searchMapDataResults[i]['latlong'],
latLngArray = latlong.split(','),
latitude = parseFloat(latLngArray[0]),
longitude = parseFloat(latLngArray[1]),
myLatLong = new google.maps.LatLng(latitude, longitude);
// addMarker(myLatLong);
var marker = new google.maps.Marker(
map: map,
animation: google.maps.Animation.DROP,
position: myLatLong,
zoom: 14
);
markers.push(marker);
(function(marker, data)
google.maps.event.addListener(marker, "click", function()
document.getElementById('directionsDiv').innerHTML = '';
document.getElementById('residentInfoDiv').innerHTML = '';
document.getElementById('dataTitle').innerHTML = "<br><h2 class='text-center'><strong>Resident's Data</strong><br></h2>";
document.getElementById('residentInfoDiv').innerHTML = "<div class='row text-center'><h4 class='text-center' style='text-decoration: underline;'><strong>Information</strong></h4><div class='col-sm-6' id='resInfoTitleDist'>" + "<b>First Name: </b>" + data.name + "<br><br>" + "<b>Middle Name: </b>" + data.mname + "<br><br>" + "<b>Last Name: </b>" + data.lname + "<br><br>" + "<b>Gender: </b>" + data.gender + "<br><br>" + "<b>Birthdate: </b>" + data.bday + "<br><br>" + "<b>Age: </b>" + data.age + "<br><br>" + "<b>Citizenship: </b>" + data.citizenship + "<br><br>" + "<b>Occupation: </b>" + data.occupation + "<br><br>" + "</div><div class='col-sm-6' id='resInfoTitleDist'><b>Status: </b>" + data.status + "<br><br>" + "<b>Purok: </b>" + data.purok + "<br><br>" + "<b>Residential Address: </b>" + data.resAddress + "<br><br>" + "<b>Permanent Address: </b>" + data.perAddress + "<br><br>" + "<b>Email: </b>" + data.email + "<br><br>" + "<b>Telephone #: </b>" + data.telNum + "<br><br>" + "<b>Cellphone #: </b>" + data.cpNum + "<br><br>" + "</div></div>";
directionsDisplay.setMap(map);
calculateAndDisplayRoute(data.latlong);
document.getElementById('directionsDiv').innerHTML = "<h4 class='text-center' style='text-decoration: underline;'><strong>Location</strong><br><br></h4>";
directionsDisplay.setPanel(document.getElementById('directionsDiv'));
var bounds = new google.maps.LatLngBounds(myLatLong, myLatLong);
google.maps.event.addListener(map, 'bounds_changed', function()
if (bounds.contains(map.getCenter()))
return;
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = bounds.getNorthEast().lng(),
maxY = bounds.getNorthEast().lat(),
minX = bounds.getSouthWest().lng(),
minY = bounds.getSouthWest().lat();
if (x < minX)
x = minX
;
if (x > maxX)
x = maxX
;
if (y < minY)
y = minY
;
if (y > maxY)
y = maxY
;
map.setCenter(new google.maps.LatLng(y, x));
);
);
)(marker, data);
function setMapOnAll(map)
for (var i = 0; i < markers.length; i++)
markers[i].setMap(map);
// console.log(markers.length);
// console.log(markers[i]);
function removeMarkers()
for (i = 0; i < markers.length; i++)
markers[i].setMap(null);
console.log("removed.");
function clearMarkers()
setMapOnAll(null);
console.log("cleared.");
function showMarkers()
setMapOnAll(map);
function deleteMarkers()
clearMarkers();
markers = [];
console.log("deleted.");
function calculateAndDisplayRoute(latLongDest)
var start = new google.maps.LatLng(7.282397, 125.683499);
var end = latLongDest;
directionsService.route(
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
, function(response, status)
if (status === google.maps.DirectionsStatus.OK)
directionsDisplay.setDirections(response);
else
// alertify.alert('Directions request failed due to ' + status + ',' + myLatLong).set('modal', false, 'movable', false);
$.bootstrapGrowl('<h4><strong>Error!</strong></h4> <p>Directions request failed due to ' + status + ',' + myLatLong + '!</p>',
type: "danger",
delay: 2500,
width: "auto",
allow_dismiss: true,
offset:
from: 'top',
amount: 20
);
);
var flightPlanCoordinates = [
lat: 7.292363,
lng: 125.667018
,
lat: 7.291958,
lng: 125.671030
,
lat: 7.292022,
lng: 125.673777
,
lat: 7.291532,
lng: 125.675864
,
lat: 7.292884,
lng: 125.676464
,
lat: 7.292809,
lng: 125.677291
,
lat: 7.292682,
lng: 125.680069
,
lat: 7.292283,
lng: 125.682475
,
lat: 7.291916,
lng: 125.684653
,
lat: 7.290319,
lng: 125.685706
,
lat: 7.290787,
lng: 125.688089
,
lat: 7.292937,
lng: 125.689033
,
lat: 7.294427,
lng: 125.689951
,
lat: 7.296428,
lng: 125.691737
,
lat: 7.295853,
lng: 125.692123
,
lat: 7.295300,
lng: 125.692273
,
lat: 7.293703,
lng: 125.694247
,
lat: 7.294001,
lng: 125.694612
,
lat: 7.294172,
lng: 125.697123
,
lat: 7.291000,
lng: 125.698678
,
lat: 7.289723,
lng: 125.697091
,
lat: 7.287808,
lng: 125.695717
,
lat: 7.285573,
lng: 125.691866
,
lat: 7.284466,
lng: 125.690793
,
lat: 7.282657,
lng: 125.689763
,
lat: 7.279996,
lng: 125.688411
,
lat: 7.278123,
lng: 125.686930
,
lat: 7.277208,
lng: 125.686287
,
lat: 7.276059,
lng: 125.685600
,
lat: 7.274207,
lng: 125.683604
,
lat: 7.274037,
lng: 125.683175
,
lat: 7.275675,
lng: 125.678412
,
lat: 7.275697,
lng: 125.673975
,
lat: 7.280188,
lng: 125.674565
,
lat: 7.280156,
lng: 125.672009
,
lat: 7.286728,
lng: 125.674788
,
lat: 7.287308,
lng: 125.673302
,
lat: 7.288127,
lng: 125.669896
,
lat: 7.287137,
lng: 125.669834
,
lat: 7.287196,
lng: 125.665787
,
lat: 7.288962,
lng: 125.666312
,
lat: 7.288718,
lng: 125.667889
,
lat: 7.290819,
lng: 125.667830
,
lat: 7.291123,
lng: 125.668512
,
lat: 7.289612,
lng: 125.668116
,
lat: 7.289734,
lng: 125.668899
,
lat: 7.290080,
lng: 125.668830
,
lat: 7.290309,
lng: 125.669729
,
lat: 7.290271,
lng: 125.670128
,
lat: 7.290301,
lng: 125.670828
,
lat: 7.291330,
lng: 125.670852
,
lat: 7.291793,
lng: 125.666922
,
lat: 7.291916,
lng: 125.666885
,
lat: 7.292363,
lng: 125.667018
];
var flightPath = new google.maps.Polyline(
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
flightPath.setMap(map);
var strictBounds = new google.maps.LatLngBounds(new google.maps.LatLng(7.274053, 125.666105), new google.maps.LatLng(7.296828, 125.698691));
google.maps.event.addListener(map, 'bounds_changed', function()
if (strictBounds.contains(map.getCenter()))
return;
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX)
x = minX
;
if (x > maxX)
x = maxX
;
if (y < minY)
y = minY
;
if (y > maxY)
y = maxY
;
map.setCenter(new google.maps.LatLng(y, x));
);
,
error: function()
$("#searchResult").html('');
// alertify.set('notifier', 'position', 'top-right');
// alertify.error('Search result empty!').dismissOthers();
$.bootstrapGrowl("<h4><strong>Resident not found!</strong></h4> <p>Search result empty!</p>",
type: "warning",
delay: 2500,
width: "auto",
allow_dismiss: true,
offset:
from: 'top',
amount: 20
);
document.getElementById('directionsDiv').innerHTML = "";
document.getElementById('residentInfoDiv').innerHTML = "";
document.getElementById('dataTitle').innerHTML = "";
// google.maps.trigger(map, 'resize');
return;
);
);
【问题讨论】：
【参考方案1】：查看文档https://developers.google.com/maps/documentation/javascript/examples/marker-remove
要删除所有标记，您必须先清除 Google Maps 实例的标记
for (var i = 0; i < markers.length; i++)
markers[i].setMap(null); //clear markers of instance google maps
markers = []; // destroy array with Markers
【讨论】：
我应该把这些代码放在哪里？因为我根据上面的代码在for() 循环之前和内部应用了removeMarker 中的代码。请尽快回复。
嗨 emo_noel10，您已将此代码应用在一个功能中，以清除所有标记。在您的上下文中拥有 Google 地图实例以使用函数 setMap(null); 非常重要
嗨@Mateus Pontes，在你根据谷歌地图文档回答这个问题之前，我已经在我的代码中应用了它，它现在可以工作了。谢谢顺便说一句（y）以上是关于如何从 Google Maps v3 API 中删除带有 mysql 数据的标记？的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps API v3：如何将缩放级别和地图中心设置为用户提交的位置？
如何使Event DOM Listener适应Google Maps JavaScript API v3.35