Php 谷歌地图,清晰的标记
当某些ajax调用完成时,我希望清除映射中所有现有的标记。我将发布API代码和我的ajax代码: 我在脚本开始时加载地图,如下所示:Php 谷歌地图,清晰的标记,php,jquery,google-maps,Php,Jquery,Google Maps,当某些ajax调用完成时,我希望清除映射中所有现有的标记。我将发布API代码和我的ajax代码: 我在脚本开始时加载地图,如下所示: <script type="text/javascript"> //SETTINGS $(document).ready(function() { // Asynchronously Load the map API var script = document.createElement('script'); script.src = "http
<script type="text/javascript">
//SETTINGS
$(document).ready(function() {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
这就是我在所有这些之后初始化google地图的方式:
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<?php echo $value->name ?>', <?php echo $value->coords ?>],
<?php endforeach; ?>
];
// Info Window Content
var infoWindowContent = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
<?php endforeach; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}
var mapMarkers=[];宣布它是全球性的
将标记推送到mapMarkers数组。
在ajax回调中,循环mapMarkers数组中的所有标记,并将其map属性设置为null。
清除mapMarkers数组
var mapMarkers = []; //STEP 1 Global, so that it can be accessed from ajax success callback
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<?php echo $value->name ?>', <?php echo $value->coords ?>],
<?php endforeach; ?>
];
// Info Window Content
var infoWindowContent = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
<?php endforeach; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
mapMarkers.push(marker); //STEP 2
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}
//AJAX AUTOCOMPLETE PLUGIN
var a = $('#searchMap2').autocomplete({
serviceUrl: '/public/index.php/prodajna_mesta/search',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
//params: { country:'Yes' }, //aditional parameters
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(suggestion) {
$.ajax({
url: "/public/index.php/prodajna_mesta/coords",
context: document.body,
data: { coords: suggestion.data }
}).done(function(data) {
//CLEAR MY MARKERS HERE
//STEP 3
var len = mapMarkers.length;
for(var i=0; i<len; i++){
mapMarkers[i].setMap(null);
}
mapMarkers = []; //Empty the array
});
}
});
});
谢谢你直截了当的回答!
var mapMarkers = []; //STEP 1 Global, so that it can be accessed from ajax success callback
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<?php echo $value->name ?>', <?php echo $value->coords ?>],
<?php endforeach; ?>
];
// Info Window Content
var infoWindowContent = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
<?php endforeach; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
mapMarkers.push(marker); //STEP 2
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}
//AJAX AUTOCOMPLETE PLUGIN
var a = $('#searchMap2').autocomplete({
serviceUrl: '/public/index.php/prodajna_mesta/search',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
//params: { country:'Yes' }, //aditional parameters
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(suggestion) {
$.ajax({
url: "/public/index.php/prodajna_mesta/coords",
context: document.body,
data: { coords: suggestion.data }
}).done(function(data) {
//CLEAR MY MARKERS HERE
//STEP 3
var len = mapMarkers.length;
for(var i=0; i<len; i++){
mapMarkers[i].setMap(null);
}
mapMarkers = []; //Empty the array
});
}
});
});