менеджер маркеров на карте Google - PullRequest
Новая
       12

менеджер маркеров на карте Google

3 голосов
/ 13 декабря 2011

У меня возникли проблемы с отображением 2 разных маркеров в зависимости от уровня масштабирования. Например, если уровень масштабирования меньше 10, то отображается значок a, а если уровень масштабирования больше 10, отображается значок 2. Я смотрел на менеджер маркеров, но немного потерял свой путь. Вот мой код: 

var url = "json.api";

function initialize() {

    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        maxZoom: 16,
        zoomControl: true,
        disableDefaultUI: true,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    downloadUrl(url, function(data) {

        var j = eval('(' + response + ')');
        var jlength = j.data.hotels.length;

        var bounds = new google.maps.LatLngBounds();

        for(i=0; i < jlength; i++) {

            var x = parseFloat(j.data.hotels[i].lat);
            var y = parseFloat(j.data.hotels[i].lon);
            var z = new google.maps.LatLng(x,y);
            var title = j.data.hotels[i].title;
            var hotel_id = j.data.hotels[i].id;
            var address = j.data.hotels[i].address;
            var star = j.data.hotels[i].star;
            var thumbnail = j.data.hotels[i].thumbnail;

            var contentstring = 'some html';

            var marker = createMarker();

            var infowindow = new google.maps.InfoWindow({
                content: contentstring
            }); 

            bounds.extend(z);

            map.fitBounds(bounds);

            //NOT SURE IF THESE ARE NEEDED  
            //  zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
            //  google.maps.event.removeListener(zoomChangeBoundsListener);
            //  });
            //  google.maps.event.addListener(map, 'zoom_changed', function() {  
            //  });
        };

        if (map.getZoom() == 21) {map.setZoom(16);}

        if (map.getZoom() < 12) {map.setZoom(map.getZoom()+1);}

        //alert(map.getZoom())

        function createMarker(){

            var marker = new google.maps.Marker({
                position: z,
                map: map,
                title: title,
                html: contentstring,
                icon: 'icona.png'
            });

            google.maps.event.addListener(marker,'click',function(){
                infowindow.setContent(this.html);
                infowindow.open(map,marker);
            });
        };
    });
};

как вы видите, у меня есть файл json, который я зацикливаю, чтобы получить значения lat и lng (и другие биты), а затем создаю маркер, который отображает все в моем файле json с информационным окном и т. Д. просто создайте вторую функцию маркера, то есть createMarker2, и как ее вызвать, если масштабирование больше 10? ... любая помощь будет принята с благодарностью. Я посмотрел на некоторые примеры в Интернете, но запутался. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 13 декабря 2011

У вас есть закомментированный раздел, который является критическим. Вам необходимо прослушать событие zoom_changed. Проверка map.getZoom () ничего не даст, если он не находится внутри этого обработчика событий. 

google.maps.event.addListener(map, 'zoom_changed', function() {
    // your zoom logic goes here
    var zoom = map.getZoom();
    if (zoom < 10) {
      // do something  
    } else {
      // do something else
    }
});

Я оставлю вам оставшуюся часть упражнения, но, скорее всего, вам нужно будет добавить каждый маркер в массив маркеров и итерировать эти маркеры, чтобы затем условно включить / выключить. Один совет для вас - вы можете добавить дополнительные свойства к объекту маркера, чтобы проверять его во время цикла. Например, вы можете добавить маркер.LessThan10 = true; к маркерному объекту. Затем при зацикливании вы можете искать это свойство выше и вызывать marker.setVisible (); в зависимости от обстоятельств.

0 голосов
/ 13 декабря 2011

Предлагаем вам выполнить код через http://www.jslint.com/ - есть несколько синтаксических ошибок (в основном трейлинг ;, которых там не должно быть).

Откуда взялся response? Это единственное место в коде, которое ссылается на него: 

var j = eval('(' + response + ')');

Не вкладывайте функцию createMarker в функцию инициализации. Сделайте его независимым и передайте данные, необходимые для создания маркера и его информационного окна, этой функции в качестве параметров.

...