Question

我创建了一个自定义Google地图，以显示不同类型的地点。当我单击列表中的checkbox菜单项时（请参阅HTML）。它将该类型的标记放置在距离地图中心20000米（20千米）的半径内。现在，当我将地图拖动到新位置时，如何从新的中心位置更新半径值，然后请求该区域中的地点类型。地点类型将从已选择的checkbox es中获取。

每次将地图拖动到新位置时都应重复此操作。

我在下面提供HTML和JS代码供参考：

<ul class="sub-menu">
    <li><a>Health</a>
        <ul class="sub-menu">
           <li><a> <input type="checkbox" class="map-checkbox" id="dentist" name="dentist" value="dentist" /> Dentist</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="doctor" name="doctor" value="doctor" /> Doctor</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="gym" name="gym" value="gym" /> Gymnasium</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="health" name="health" value="health" /> Health</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="hospital" name="hospital" value="hospital" /> Hospital</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="pharmacy" name="pharmacy" value="pharmacy" /> Pharmacy</a></li>         
         </ul> 
     <li><a>Travel</a>
        <ul class="sub-menu">
           <li><a> <input type="checkbox" class="map-checkbox" id="airport" name="airport" value="airport" /> Airport</a>
            <li><a> <input type="checkbox" class="map-checkbox" id="bus_station" name="bus_station" value="bus_station" /> Bus Station</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="car_rental" name="car_rental" value="car_rental" /> Car Rental</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="subway_station" name="subway_station" value="subway_station" /> Subway Station</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="taxi_stand" name="taxi_stand" value="taxi_stand" /> Taxi Stand</a></li> 
            <li><a> <input type="checkbox" class="map-checkbox" id="train_station" name="train_station" value="train_station" /> Train Station</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="travel_agency" name="travel_agency" value="travel_agency" /> Travel Agency</a></li>
         </ul>
     </li>
</ul>

Javascript代码：

var loc_geocoder;
var loc_map;
var loc_marker;
var loc_image = tpl_dir + '/images/marker.png';
var placetype = [];
var selected_markers = [];

function initialize() {

//fetch lat,lng values from the post
post_location();

 // prepare Geocoder
 geocoder = new google.maps.Geocoder();

//set initial position (from the post)
map = new google.maps.Map(document.getElementById('location_map'),     {
    zoom: 10,
    center: postlatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
        });
            loc_marker = new google.maps.Marker({
            position: postlatlng,
            title: 'CFP Roar',
            map: map,
            icon: loc_image
    });
 google.maps.event.addListener(map,'dragend',function(event) {

    clearOverlays();
    selectedMarkers();
    findPlaces(selected_markers);
    }
}

function selectedMarkers() {
 selected_markers = [];
$('.map-checkbox').each(function() {
        var $this = $(this);
        if($this.is(':checked')){
    selected_markers.push($this.val());
        }
});
}

function clearOverlays() {
if (markers) {
    for (i in markers) {
         markers[i].setMap(null);
    }
}
}
function findPlaces(type) {
var radius;
var lat = document.getElementById('post_lat').value;
var lng = document.getElementById('post_lng').value;
var cur_location = map.getCenter();
var request = {
    location: cur_location,
    radius: 50000,
    types: [type]
};
if (keyword) {
    request.keyword = [keyword];
}
service = new google.maps.places.PlacesService(map);
service.search(request, createMarkers);
}

function createMarkers(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
    // if we have found something - clear map (overlays)
    //clearOverlays();
    // and create new markers by search result
    for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
    }
    //console.log(results);
    //$('#test').append( markers );
} else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
    alert('Sorry, nothing is found');
}
}
function createMarker(obj) {
    var mark = new google.maps.Marker({
    position: obj.geometry.location,
    map: map,
    title: obj.name,
marktype: placetype,
icon: gp_tpl_dir + '/gp/images/places/' + placetype + '.png'
});
     markers.push(mark);
//mark_array.push(mark);
    var infowindow = new google.maps.InfoWindow({
    content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name +
    '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
});
    google.maps.event.addListener(mark, 'click', function() {
    clearInfos();
    infowindow.open(map,mark);
});
   infos.push(infowindow);
}

Answer 1

我不太确定我明白你要做什么，但也许会调查'center_change'听众：

https://developers.google.com/maps/documentation/javascript/events

如何更新所选地点类型的新标记..？

1 个答案: