【发布时间】：2020-08-17 05:20:54
【问题描述】：
我有一张显示 MySQL 数据库信息的地图。我修改了 initmap() 函数来过滤它。但是，每次过滤标记时，地图都会重新加载，我希望在不重新加载地图的情况下过滤它们。
我认为解决方案是将创建地图的函数与生成标记的函数分开。但我无法做到。
感谢您的帮助！
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
#map {
height: 75%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<html>
<body>
<div id="map"></div>
<input onkeyup="initMap('input', null);table('input')" id="input" type="text" name="valueToSearch">
<script>
function initMap(ElemId, rowId) {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.8566, 2.3522),
zoom: 12
});
var filter = "";
var table = "";
var tablefilter = "";
var infoWindow = new google.maps.InfoWindow;
function parseToHTML(string) {
string = string.replace(/"/g, "\"");
string = string.replace(/'/g, "\'");
string = string.replace(/</g, "<");
string = string.replace(/>/g, ">");
string = string.replace(/&/g, "&");
string = string.replace(/¨/g, "ö");
return (string);
}
// Change this depending on the name of your PHP or XML file
downloadUrl('../xml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
name = parseToHTML(name);
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var architect1 = markerElem.getAttribute('architect1');
var architect2 = markerElem.getAttribute('architect2');
var architect3 = markerElem.getAttribute('architect3');
var buildingEnd = markerElem.getAttribute('building_end');
var street = markerElem.getAttribute('street');
var postcode = markerElem.getAttribute('postcode');
var city = markerElem.getAttribute('city');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address + ' ' + name;
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
title: name,
});
if (rowId != null) {
var rowIndex = document.getElementById(rowId).id;
console.log(rowIndex);
if (rowIndex == id) {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
}
}
if (ElemId != null) {
var input = document.getElementById(ElemId);
var filter = input.value.toUpperCase();
filter = filter.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
function escaping(strData) {
strData = strData.toUpperCase();
strData = strData.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
return strData;
}
var nameFilter = escaping(name);
var archiFilter = escaping(architect1);
var archi2Filter = escaping(architect2);
var archi3Filter = escaping(architect3);
var typeFilter = escaping(type);
var buildingEndFilter = escaping(buildingEnd);
var streetFilter = escaping(street);
var postcodeFilter = escaping(postcode);
var cityFilter = escaping(city);
var testName = nameFilter.includes(filter);
var testArchi1 = archiFilter.includes(filter);
var testArchi2 = archi2Filter.includes(filter);
var testArchi3 = archi3Filter.includes(filter);
var testType = typeFilter.includes(filter);
var testBuildingEndFilter = buildingEndFilter.includes(filter);
var testStreet = streetFilter.includes(filter);
var testPostcode = postcodeFilter.includes(filter);
var testCity = cityFilter.includes(filter);
if (
testName == true ||
testArchi1 == true ||
testArchi2 == true ||
testArchi3 == true ||
testType == true ||
testBuildingEndFilter == true ||
testStreet == true ||
testPostcode == true ||
testCity == true
) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
};
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY">
</script>
</body>
</html>
【问题讨论】：
标签： javascript html google-maps google-maps-api-3 google-maps-markers