Google Maps v3 - как стилизовать «шарик» и раскрасить страну? - PullRequest
Новая
       34

Google Maps v3 - как стилизовать «шарик» и раскрасить страну?

2 голосов
/ 12 декабря 2011

Кто-нибудь знает, как можно стилизовать шарик, который появляется в Google Maps v3, когда вы нажимаете место?Я хочу изменить «комический стиль» по умолчанию.

Второй вопрос: можно ли автоматически (или каким-либо другим способом) раскрасить страну (т. Е. Я хочу иметь США с красным наложением, Канадас желтым наложением и т. д.)?

Спасибо, да

Ответы [ 2 ]

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

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

google.maps.event.addListener(marker, 'click', function() {
  loadInfoWindow(map, marker);
});

function loadInfoWindow(map, marker){
        clearInfoWindow();
        pixelOffset = getPixelPosInMap(map, marker);
        var iwc = ''; // infowindow markup goes here
        $('#iwContainer').css({'margin-top':(pixelOffset.y - 100), 'margin-left':(pixelOffset.x - 40)}).html(iwc).fadeIn('fast');
    }

function getPixelPosInMap(map, marker){
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        return new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
    }

Этот код использует jQuery для извлечения контейнера информационного окна #iwContainer. У меня есть следующие стили для контейнера информационного окна. 

#iwContainer {
  position: absolute;
  display: none;
  background-color: white;
  color: #900;
  font-size: 10px;
  padding: 5px;
  width: 90px;
  border: 1px solid #900;
  border-radius: 5px;
  z-index: 100;
  opacity: 0.85;
}
3 голосов
/ 12 декабря 2011

Как я вижу, у шаров infowindow есть встроенные стили, поэтому к ним сложно применить стилизацию. Итак, одна из альтернатив - создать собственный класс для пузырьков (или найти его, например, смотрите здесь: Карты Google: как создать собственное окно InfoWindow? ).

Ваш второй вопрос: не существует простого и обобщенного способа показать наложение так, как вы хотите. Я имею в виду, что такого вызова API нет. Но это можно сделать относительно легко, используя полигоны. (см. Как добавить и удалить полигоны на карте Google (версия 3)? ), вам просто нужны границы стран, которые вы можете найти в сети.

...