Javascript 在不刷新页面的情况下,无法使用setMap(null)从google地图中删除标记
这是我的代码,当我调用removeMarkers()时,它并没有删除标记Javascript 在不刷新页面的情况下,无法使用setMap(null)从google地图中删除标记,javascript,google-maps,Javascript,Google Maps,这是我的代码,当我调用removeMarkers()时,它并没有删除标记 function receiver(data, textStatus, XMLHttpRequest) { var json = JSON.parse(data); for (var i = 0; i < json.length; i++) { var lat = json[i]["lat"]; var lng = json[i]["lng"]; // push object int
function receiver(data, textStatus, XMLHttpRequest) {
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
var lat = json[i]["lat"];
var lng = json[i]["lng"];
// push object into features array
features.push({ position: new google.maps.LatLng(lat,lng) });
}
features.forEach(function(feature) {
var marker1 = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
});
gmarkers.push(marker1);
}
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
函数接收器(数据、文本状态、XMLHttpRequest){
var json=json.parse(数据);
for(var i=0;i函数removeMarkers(){
特征。长度=0;
如果(gmarkers!=[]){
对于(var i=0;i您的应用程序在控制台中抛出大量错误,这只是对您所请求的内容的临时修复:
更改原点和目标,我要删除旧标记和
显示新标记而不刷新页面
在HTML文件中使用脚本标记调用initialize()
函数。这是包含项目API密钥的地方:
<script defer async src="https://maps.googleapis.com/maps/api/js?
key=YOUR_KEY&callback=initialize">
这其实是在,
始终明确设置贴图高度以定义div的大小
包含映射的元素
现在进入您的JS代码。。。
您使用var服务
的目的是什么?var服务
首先在全局范围内用null
值声明,然后分配给places服务
构造函数……但是服务
没有定义,因为您的脚本标记中没有包含places库
:
如果要使用PLACES API,请添加PLACES库
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&_ADD_libraries=places_PLEASE_"></script>
如果您这样做,而不刷新页面,则会清除每个后续请求的标记。您仍然会收到大量错误,因为您的应用程序中存在语法和逻辑错误
感谢您的回复,我添加了gmarkers=[];但仍然没有删除。如果您对gmarkers进行console.log操作,您能看到标记吗?您是否正确地将它们推到了那里?以及在代码中的何处调用路由函数?这就是实际调用removeMarkers()的函数很抱歉,我更新了我的html部分,从那里我调用了路由函数。当使用console.log时,我得到了[]用户视图:216[.Ie]用户视图:216(2)[.Ie,.Ie]用户视图:216(3)[.Ie,.Ie,[uu.Ie]用户视图:216(4)[.Ie,[uu.Ie,[uu.Ie,]userView:216(5)[.Ie,.Ie,[uu.Ie,]Ie,[uu.Ie,[uu.Ie,[uu.Ie,]userView:216(6)[.Ie,]在consolerouteBoxer=newrouteboxer()中这样输出;这不是无用的,这是我代码的主要部分之一,RouterBox帮助沿路线绘制小矩形框。我将框坐标限制与我的数据库进行比较,从数据库中获取框坐标限制内的坐标,然后在google map中显示坐标。抱歉,我不熟悉google map api和javascript。抱歉,我犯了错误在上面的一个屏幕截图中,首先选择了一个起点和目的地,它显示了路线附近保存的坐标。在没有刷新的情况下,我选择了另一个目的地,它绘制的路线也显示了路线上保存的坐标,但旧的路线标记仍然存在。这不是我刚才所说的重点。你的应用程序在dif中断如果你使用了由于库没有正确加载或完全丢失而无法使用的构造函数,这会在控制台中引发错误,使应用程序的行为异常。你是否真的*使用了我刚刚发送给你的BIN中的代码?因为如果我查看你的应用程序试图解决你的问题然后你就完全忽略了这些建议,然后又给出了更多不起作用的例子……你明白了,不是吗?很抱歉我的反应太晚了。我在BIN中尝试了我的代码,它没有任何错误。我按照你之前说的更新了我的代码,除了这个“像这样添加时,我出现了错误”“未捕获Qb{消息:“初始化不是函数”,名称:“InvalidValueError”,堆栈:“Error”↵ 在新的Qb(…nuitIJM5A3ZLSnJYBcF1Wo&callback=initialize:151:59“})。非常感谢您的帮助。我解决了我的问题。我刚刚在removeMarkers()中添加了一行,features.length=0;它解决了我的问题。再次感谢您的帮助。
<script>
var map;
var marker;
var infowindow;
var messagewindow;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
var service = null;
var gmarkers = [];
var boxes = null;
var coordinates=null;
var features = [];
var gmarkers = [];
<?php
echo "
var lat={$lat};
var lng={$lng};
"
?>
function initialize() {
var location = {lat: 10.525956868983068, lng:76.21387481689453};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
service = new google.maps.places.PlacesService(map);
routeBoxer = new RouteBoxer();
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
map: map
});
}
function route() {
removeMarkers()
clearBoxes();
distance = parseFloat(document.getElementById("distance").value) * 0.1;
var request = {
origin: document.getElementById("from").value,
destination: document.getElementById("to").value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
var path = result.routes[0].overview_path;
boxes = routeBoxer.box(path, distance);
drawBoxes();
findPlaces(0);
} else {
alert("Directions query failed: " + status);
}
});
}
function drawBoxes() {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 0,
map: map
});
}
}
function findPlaces(searchIndex) {
var request = {
bounds: boxes[searchIndex],
};
coordinates = boxes[searchIndex].toString().match(/[0-9]+\.[0-9]+/g);
$.ajax({
url:"http://localhost/church_finder/index.php/MapController/search_church",
type:'POST',
data:{coordinates:coordinates},
//dataType:'json',
success: receiver
});
if (status != google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
searchIndex++;
if (searchIndex < boxes.length)
findPlaces(searchIndex);
} else {
setTimeout("findPlaces(" + searchIndex + ")", 1000);
}
}
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
boxpolys = null;
}
function receiver(data, textStatus, XMLHttpRequest) {
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
var lat = json[i]["lat"];
var lng = json[i]["lng"];
features.push({ position: new google.maps.LatLng(lat,lng) });
}
features.forEach(function(feature) {
var marker1 = new google.maps.Marker({
position: feature.position,
map: map
});
});
gmarkers.push(marker1);
}
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
function removeMarkers(){
features.length=0;
if (gmarkers != []) {
for(var i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
gmarkers =[];
}
<script defer async src="https://maps.googleapis.com/maps/api/js?
key=YOUR_KEY&callback=initialize">
#map {
height: 100%;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&_ADD_libraries=places_PLEASE_"></script>
service = new google.maps.places.PlacesService(map);
routeBoxer = new RouteBoxer();