Как добавить границу CSS на Google Maps v3 icon

Question

Я хочу добавить границу css на иконку Google Maps.

Но я не знаю, как мне это сделать?

Это мой код! плз ....!

http://fiddle.jshell.net/yX7ce/9/

<script type="text/javascript">
      function initialize() {
        var myOptions = {
          zoom: 4,
          center: new google.maps.LatLng(-25.363882, 131.044922),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var marker = new google.maps.Marker({
          position: map.getCenter(),
          map: map,
          title: 'Click to zoom',
          icon: 'images/a01.jpg'
        });

        google.maps.event.addListener(marker, 'click', function() {
          if (map.getZoom() == 8) {
            map.setZoom(4);
          } else {
            map.setZoom(8);
          }
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Answer 1

У вас есть 2 варианта:

1) Создайте два изображения для всех ваших значков, одно без рамки и одно с помощью, а затем поменяйте местами MarkerIcon при нажатии

2) Как говорит Скотт, используйте CustomOverlay, который в основном позволяет поместить HTML в точку LatLng, а затем вы можете добавить прослушиватели щелчков для применения / удаления стилей для оверлеев.

Answer 2

Как вы, наверное, заметили, нет удобного способа добавить атрибуты к значкам, которые позволили бы вам получить к ним доступ через css.

Настоящее решение заключается в создании пользовательских наложений, которые действуют как значки:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

Это довольно интенсивно.

Простое быстрое и грязное решение в вашем случае - использовать jquery для поиска атрибутов, соответствующих вашим пользовательским значкам = 'http://farm8.staticflickr.com/7033/6790615621_504e654272_s.jpg' - и прослушивания событий mouseover / mouseout. Это не очень гибко, конечно ...

Answer 3

Используйте MarkerWithLabel для V3 , и вы можете применять стили (и пользовательские метки) к маркерам. Их пример показывает базовое использование с границами.

<!-- language: lang-css -->
 <style type="text/css">
   .labels {
     text-align: center;
     width: 40px;     
     border: 2px solid black;
   }
 </style>

И JS

<!-- language: lang-js -->
 var latLng = new google.maps.LatLng(49.47805, -123.84716);

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 12,
   center: latLng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var marker = new MarkerWithLabel({
   position: latLng,
   draggable: false,
   map: map,
   labelContent: "hello world",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75}
 });

Answer 4

Я думаю, вам лучше сделать границу частью исходного изображения значка, потому что (а) у вас есть способ узнать идентификатор / класс элемента img для применения CSS и (b), даже если Вы могли бы, это была бы прямоугольная граница, которая может быть нежелательна.

Answer 5

В основном вам нужно использовать стилизованную карту Google. См. пример здесь

Answer 6

$("#map_canvas").css({border: '1px solid silver'})