3

さまざまな種類の場所を表示するために、カスタムのGoogleマップを作成しました。checkboxリスト内のメニュー項目をクリックすると（HTMLを参照）。そのタイプのマーカーは、マップの中心から半径20000 m（20 km）以内に配置されます。地図を新しい場所にドラッグするときに、新しい中心の場所から半径の値を更新して、その地域の場所の種類をリクエストするにはどうすればよいですか。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);
}
4

1 に答える 1

1

あなたが何をしようとしているのかよくわかりませんが、おそらく「center_change」リスナーを調べてください。

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

于 2013-02-26T14:32:13.517 に答える