Вопрос по html, google-maps-api-3, google-maps, javascript – Маркер API Карт Google v3 с меткой

18

Я новичок в JS и Google API, и я пытаюсь сделать несколько маркеров, каждый из которых имеет метку.

Из небольших фрагментов, которые я просматривал, не было простого способа прикрепить ярлык к маркеру в Google Maps API v3. Между поиском в Google и поиском в стеке, каждый использовал обходную процедуру, которая включала создание или редактирование класса меток.

Я просто хочу выяснить, как просто прикрепить метку к каждому маркеру, так как я только начинаю изучать JS / Google API v3.

Спасибо

РЕДАКТИРОВАТЬ № 3: Хорошо, я наконец понял, что было не так, и правильно реализовал несколько маркеров с метками, используя код Лилины. По-видимому, мы оба определили карту var по-разному, и это само по себе делает оба наших кода неспособными к синхронизации.

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

Google Maps API v3 - разные маркеры / метки на разных уровнях масштабирования

Ваш Ответ

3   ответа
1

Недавно у меня возникла проблема с зависанием браузера Safari при построении маркеров, даже если маркеров меньше. Сначала я использовал маркер с библиотекой label (markerwithlabel.js) для построения маркера, когда я использую встроенный маркер Google, он работал нормально даже с большим количеством маркеров, но я хочу настроить маркеры, поэтому я ссылаюсь на вышеупомянутое решение, данное Джонатаном, но все же проблема сбоев не решается после проведения большого количества исследований. узнал оhttp://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers этот блог и теперь мой поиск по карте работает на Ipad-2 :)

39

MarkerWithLabel, Как показано вthe basic exampleСтили CSS определяют внешний вид метки, а параметры в JavaScript определяют содержание и размещение.

 .labels {
   color: red;
   background-color: white;
   font-family: "Lucida Grande", "Arial", sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 60px;     
   border: 2px solid black;
   white-space: nowrap;
 }

JavaScript:

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   map: map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75}
 });

Единственная часть, которая может сбить с толку - это labelAnchor. По умолчанию верхний левый угол метки будет соответствовать конечной точке метки. Установка значения x для labelAnchor равным половине ширины, определенной в свойстве CSS width, будет центрировать метку. Вы можете сделать ярлык плавающим над маркером с помощью точки привязки, напримерnew google.maps.Point(22, 50).

В случае, если доступ к ссылкам выше заблокирован, я скопировал и вставилупакованный источник MarkerWithLabel в этомJSFiddle demo, Я надеюсь, что JSFiddle разрешено в Китае: |

MarkwithLable сейчас недоступно, что мне делать?
Это хорошо .. Но для отображения метки, когда количество маркеров огромно, требуется много времени. Есть ли альтернативное решение этой проблемы?
@TinaCGHoehr - Начиная с версии 1.1.9 MarkerWithLabel, она имеет проблемы с перекрытием (проблема № 24), когда маркеры находятся близко друг к другу. Увидеть это в этомfiddle example.
Возможно, это связано с порядком загрузки страницы, например, если Javascript загружается после загрузки тела.
По-видимому, я не могу переместить весь свой код в & lt; head & gt ;. Я не уверен, почему, хотя, поскольку есть только несколько переменных, а также событие. Единственное реальное основное различие I между моим и другими рабочими кодами заключается в том, что & lt; head & gt; содержит только карту переменных, функции и события. В то время как шахта использует петлю для локаций. krikara
5

вам нужно создать собственное наложение. Образец вhttp://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html использует собственный класс,Layerчто наследует отOverlayView (который наследует отMVCObject) из API Карт Google. У него есть исправленная версия (добавлена поддержка видимости, zIndex и события click), которую можно найти здесь:http://blog.mridey.com/2011/05/label-overlay-example-for-google-maps.html

The following code is taken directly from Marc Ridey's Blog (the revised link above).

Layer class

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
  // Initialization
  this.setValues(opt_options);


  // Label specific
  var span = this.span_ = document.createElement('span');
  span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
  'white-space: nowrap; border: 1px solid blue; ' +
  'padding: 2px; background-color: white';


  var div = this.div_ = document.createElement('div');
  div.appendChild(span);
  div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;


// Implement onAdd
Label.prototype.onAdd = function() {
  var pane = this.getPanes().overlayImage;
  pane.appendChild(this.div_);


  // Ensures the label is redrawn if the text or position is changed.
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
    google.maps.event.addDomListener(this.div_, 'click', function() {
      if (me.get('clickable')) {
        google.maps.event.trigger(me, 'click');
      }
    })
  ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   google.maps.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + 'px';
 div.style.top = position.y + 'px';
 div.style.display = 'block';

 this.span_.innerHTML = this.get('text').toString();
};

Usage

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
      Label Overlay Example
    </title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="label.js"></script>
    <script type="text/javascript">
      var marker;


      function initialize() {
        var latLng = new google.maps.LatLng(40, -100);


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


        marker = new google.maps.Marker({
          position: latLng,
          draggable: true,
          zIndex: 1,
          map: map,
          optimized: false
        });


        var label = new Label({
          map: map
        });
        label.bindTo('position', marker);
        label.bindTo('text', marker, 'position');
        label.bindTo('visible', marker);
        label.bindTo('clickable', marker);
        label.bindTo('zIndex', marker);


        google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); })
        google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); })
      }


      function showHideMarker() {
        marker.setVisible(!marker.getVisible());
      }


      function pinUnpinMarker() {
        var draggable = marker.getDraggable();
        marker.setDraggable(!draggable);
        marker.setClickable(!draggable);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="height: 200px; width: 200px"></div>
    <button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
    <button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
  </body>
</html>
Похоже, у вас есть MarkerWithTag.prototype.onRemove и вы рисуете дважды в своем JavaScript, функции нужны только один раз.
Отличается ли функция Label от стандартной Google? Если так, как я могу изменить это? В настоящее время я пытаюсь применить ваш фрагмент ярлыка из второго блока кода к своему собственному, но я не получаю никаких ярлыков для отображения. krikara
Класс Label - это пользовательский класс, который не является частью API. Во втором фрагменте выше есть ссылка на label.js, где находится первый фрагмент кода. Возможно, вам придется опубликовать некоторый код, чтобы мы могли видеть, что происходит.

Похожие вопросы