我正在尝试通过半径和我的位置创建地图过滤来自acf字段功能的示例，因为它在wordpress中工作但是有showCloseLocations（）函数的问题。一切都工作正常，因为它不会只显示半径中的标记。
问题出现在geocoder.geocode的某个地方，如果在运行函数后单击它，删除半径和标记，但不更新新的半径和标记。
有人能帮助我做错了什么或者缺少什么？
(function($) {
function render_map( $el ) {
var input_address = document.getElementById('radius_input_address');
var radius_input = parseInt(document.getElementById('radius_input_field').value, 10)*1000;
var searchBox = new google.maps.places.SearchBox(input_address);
var inputBox = document.getElementById('radius_input_field');
var $markers = $el.find('.marker');
var args = {
zoom : 8,
center : new google.maps.LatLng(51.919438, 19.14513599999998),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( $el[0], args);
map.markers = [];
$markers.each(function(){
add_marker( $(this), map );
});
//My location marker and radius
var myLocationMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: 'https://toobokn.psdes.pl/wp-content/themes/toobok/img/myLocationMarker.png',
title: 'Moja Lokalizacja'
//position: faisalabad
});
addYourLocationButton(map, myLocationMarker);
var myLocationMarkerRadius = new google.maps.Circle({
strokeColor: "#9BCCDF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#9BCCDF",
fillOpacity: 0.35,
map: map,
//center: latlng,
radius: radius_input,
draggable: false
});
myLocationMarkerRadius.bindTo('center', myLocationMarker, 'position');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(inputBox)
map.controls[google.maps.ControlPosition.TOP_CENTER].push(radius_src_btn)
map.controls[google.maps.ControlPosition.TOP_CENTER].push(only_in_radius_btn)
// SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
google.maps.event.addListener(searchBox, 'places_changed', function() {
var place = searchBox.getPlaces()[0];
if (!place.geometry) return;
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
myLocationMarkerRadius.setCenter(place.geometry.location);
} else {
map.setCenter(place.geometry.location);
map.setZoom(12);
}
});
window.updateRadius = function() {
var radius_input = parseInt(document.getElementById('radius_input_field').value, 10)*1000;
myLocationMarkerRadius.setRadius(parseFloat(radius_input));
console.log('radius updated');
}
window.showCloseLocations = function() {
var i;
var geocoder;
if (myLocationMarkerRadius) {
myLocationMarkerRadius.setMap(null);
myLocationMarkerRadius = null;
}
for (i = 0; i < map.markers.length; i++) {
if (map.markers[i]) {
map.markers[i].setMap(null);
map.markers[i] = null;
}
}
if (geocoder) {
geocoder.geocode(myLocationMarker, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var myLocationMarker = results[0].geometry.location;
myLocationMarkerRadius = new google.maps.Circle({
center: myLocationMarker,
radius: radius_input,
clickable: false,
map: map
});
if (myLocationMarkerRadius) map.fitBounds(myLocationMarkerRadius.getBounds());
for (var j = 0; j < map.markers.length; j++) {
(function (location) {
var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(myLocationMarker, marker_lat_lng);
//distance in meters between your location and the marker
if (distance_from_location <= radius_input * 1000) {
var new_marker = new google.maps.Marker({
position: marker_lat_lng,
map: map,
title: location.name
});
google.maps.event.addListener(new_marker, 'click', function () {
if(infowindow){
infowindow.setMap(null);
infowindow = null;
}
infowindow = new google.maps.InfoWindow( {
content: '<div style="color:red">'+location.name +'</div>' + " is " + distance_from_location + " meters from my location",
size: new google.maps.Size(150,50),
pixelOffset: new google.maps.Size(0, -30),
position: marker_lat_lng,
map: map
});
});
markers.push(new_marker);
}
})(map.markers[j]);
}
} else {
alert("No results found while geocoding!");
}
} else {
alert("Geocode was not successful: " + status);
}
});
}
}
// Your Location Button
function addYourLocationButton(map, marker) {
var myLocMapBtn = document.createElement('div');
var myLocationMapBtn = document.createElement('button');
myLocationMapBtn.style.backgroundColor = '#fff';
myLocationMapBtn.style.border = 'none';
myLocationMapBtn.style.outline = 'none';
myLocationMapBtn.style.width = '28px';
myLocationMapBtn.style.height = '28px';
myLocationMapBtn.style.borderRadius = '2px';
myLocationMapBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
myLocationMapBtn.style.cursor = 'pointer';
myLocationMapBtn.style.marginRight = '10px';
myLocationMapBtn.style.padding = '0px';
//myLocationMapBtn.title = 'Your Location';
myLocMapBtn.appendChild(myLocationMapBtn);
var myLocationMapBtnIcon = document.createElement('div');
myLocationMapBtnIcon.style.margin = '5px';
myLocationMapBtnIcon.style.width = '18px';
myLocationMapBtnIcon.style.height = '18px';
myLocationMapBtnIcon.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
myLocationMapBtnIcon.style.backgroundSize = '180px 18px';
myLocationMapBtnIcon.style.backgroundPosition = '0px 0px';
myLocationMapBtnIcon.style.backgroundRepeat = 'no-repeat';
myLocationMapBtnIcon.id = 'my_location_img';
myLocationMapBtn.appendChild(myLocationMapBtnIcon);
google.maps.event.addListener(map, 'dragend', function() {
$('#my_location_img').css('background-position', '0px 0px');
});
myLocationMapBtn.addEventListener('click', function() {
var imgX = '0';
var animationInterval = setInterval(function(){
if(imgX == '-18') imgX = '0';
else imgX = '-18';
$('#my_location_img').css('background-position', imgX+'px 0px');
}, 500);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
marker.setPosition(latlng);
map.setCenter(latlng);
clearInterval(animationInterval);
$('#my_location_img').css('background-position', '-144px 0px');
});
}
else{
clearInterval(animationInterval);
$('#my_location_img').css('background-position', '0px 0px');
}
radius_input;
myLocationMarkerRadius.setRadius(parseFloat(radius_input));
myLocationMarkerRadius.bindTo('center', myLocationMarker, 'position');
//map.setCenter(place.geometry.location);
map.setZoom(12);
console.log('my location updated');
});
myLocMapBtn.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myLocMapBtn);
}
center_map( map );
markerCluster( map.markers, map )
return map;
}
// end render_map function
// Add Marker / Markers
function add_marker( $marker, map ) {
//var image = '/icon.png';
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var icon = $marker.attr('data-icon');
var marker = new google.maps.Marker({
position : latlng,
map : map,
//icon : image
animation: google.maps.Animation.DROP,
});
map.markers.push( marker );
if( $marker.html() ) {
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent($marker.html());
infowindow.open(map, marker);
});
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close();
}
});
}
console.log('markers added');
}
// Center Map
function center_map( map ) {
var bounds = new google.maps.LatLngBounds();
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
if( map.markers.length == 1 ) {
map.setCenter( bounds.getCenter() );
map.setZoom( 10 );
} else {
map.fitBounds( bounds );
}
}
// Group Markers
function markerCluster( markers, map ) {
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
//console.log( markers );
console.log('markers grouped');
}
// Render Map
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
map = render_map( $(this) );
});
});
}）（jQuery的）;
更新并变为： showCloseLocations（）应该是 - ＆gt; window.showCloseLocations = function（）
答案 0 :(得分：0)
尝试在这些之后添加分号？
map.controls[google.maps.ControlPosition.TOP_CENTER].push(inputBox)
map.controls[google.maps.ControlPosition.TOP_CENTER].push(radius_src_btn)
map.controls[google.maps.ControlPosition.TOP_CENTER].push(only_in_radius_btn)
markerCluster( map.markers, map )
无法发表评论。只是一个建议可能会解决它可能没有。