Google Maps Javascript событие проблема - PullRequest
Новая
       12

Google Maps Javascript событие проблема

1 голос
/ 28 ноября 2011

Я пытаюсь сделать несколько слушателей событий для моей домашней страницы. Но я могу зарегистрировать только одно событие. Событие, которое работает для меня, это добавление маркера и круга к нему. Но когда я пытаюсь сделать что-то еще, например, щелкнув по маркеру, чтобы удалить его или получить радиус от круга, когда радиус изменяется. Кто-нибудь знает, что я делаю не так? У меня также есть проблемы с отображением карты. Карта загружается, и я вижу все, кроме карты. 

var map = new google.maps.Map(document.getElementById("map_areas"), {
    zoom:8,
    center: latlng,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    zoomControl: true,
    zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE},
    overviewMapControl: true,
    panControl: true
});

var marker;
var circle;
google.maps.event.addListener(map, 'click', function(evt) {
    addMarkerAndCircle(evt);
});

function addMarkerAndCircle(evt) {
    marker = new google.maps.Marker({
        position:  evt.latLng,
        animations: google.maps.Animation.DROP,
        map:map,
        draggable: true,
        clickable:true
    });
    circle = new google.maps.Circle({
        map:map,
        radius:16093, // 10 miles in metres
        fillColor:'#AA0000',
        clickable: true,
        editable: true
    });
    circle.bindTo('center', marker, 'position');
    markersArray.push(marker);
    circleArray.push(circle);
}

google.maps.event.addListener(circle, 'radius_changed', function() {
    var radius = circle.getRadius();
});

http://img231.imageshack.us/img231/6739/googlemapsv.jpg

1 Ответ

4 голосов
/ 28 ноября 2011

Вам необходимо прикрепить слушатель события круга к кругу при его создании. В своем коде вы добавляете слушателя в круг, который еще не определен. Попробуйте это: 

function addMarkerAndCircle(evt) {
    marker = new google.maps.Marker({
       position:  evt.latLng,
       animations: google.maps.Animation.DROP,
       map:map,
       draggable: true,
       clickable:true
    });
    circle = new google.maps.Circle({
       map:map,
       radius:16093, // 10 miles in metres
       fillColor:'#AA0000',
       clickable: true,
       editable: true
    });
    circle.bindTo('center', marker, 'position');
    addRadiusChanged(circle);
    markersArray.push(marker);
    circleArray.push(circle);
}

function addRadiusChanged(c) {
    google.maps.event.addListener(c, 'radius_changed', function() {
        var radius = c.getRadius();
        // do something with radius
    });

Вы можете изменить размер карты, чтобы заполнить div этим: 

 google.maps.event.trigger(map,'resize');
...