Почему названия маркеров не отображаются в моем приложении Google Maps API3? - PullRequest
Новая
       0

Почему названия маркеров не отображаются в моем приложении Google Maps API3?

2 голосов
/ 19 марта 2012

Я добавил маркеры на карту с помощью этой функции.

markers: массив объектов Marker
location: объект LatLng
myMarkerTitle: желаемое название для моего маркера 

// adds new markers to the map.
function addAMarker(location, myMarkerTitle) {
    newMarker = new google.maps.Marker({
            position: location,
            map: map
    });
    newMarker.setTitle(myMarkerTitle);
    markers.push(newMarker);
}

Он добавляет маркеры на карту, но названия, которые я назначил маркерам, не отображаются. Почему?

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

Ответы [ 3 ]

5 голосов
/ 19 марта 2012

Из того, что я понял, вы хотите, чтобы всплывающая подсказка была видна всегда.Есть библиотека InfoBox Utility, которая может создать что-то подобное.Это очень гибко, что также означает, что есть много вариантов для установки.Например, раздражает, что если текст становится слишком длинным, он выходит за пределы поля (поэтому ширину необходимо задавать динамически).

Doc: http://google -maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html Загрузить: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / src /

Посмотрите на скриншот, если это то, что вам нужно, скачайте infobox_packed.js и попробуйте код ниже.

InfoBox example

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="infobox_packed.js"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var count = 0;

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
          addMarker(event.latLng, "index #" + Math.pow(100, count));
          count += 1;
        });
      }

      function addMarker(pos, content) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });
        marker.setTitle(content);

        var labelText = content;

        var myOptions = {
          content: labelText
           ,boxStyle: {
              border: "1px solid black"
             ,background: "white"
             ,textAlign: "center"
             ,fontSize: "8pt"
             ,width: "86px"  // has to be set manually
             ,opacity: 1.0
            }
           ,disableAutoPan: true
           ,pixelOffset: new google.maps.Size(-43, -50) // set manually
           ,position: marker.getPosition()
           ,closeBoxURL: ""
           ,pane: "floatPane"
           ,enableEventPropagation: true
        };

        var ibLabel = new InfoBox(myOptions);
        ibLabel.open(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
2 голосов
/ 22 марта 2012

Это не решит вашу проблему, но почему вы вызываете setTitle после создания нового маркера? Код такой: 

var newMarker = new google.maps.Marker{
    position: location,
    map: map,
    title: MyMarkerTitle
}

Когда вы вызываете setTitle, API вызывает набор методов MVCObject, поэтому приведенный выше код такой же, как: 

var newMarker = new google.maps.Marker{
    position: location
};
newMarker.setMap(map);
newMarker.setTitle(myMarkerTitle);

это тоже работает: 

var newMarker = new google.maps.Marker{ position: location };
newMarker.set("map", map);
newMarker.set("title", myMarkerTitle);

и это: 

var newMarker = new google.maps.Marker{ position: location };
newMarker.setValues({ map: map, title: myMarkerTitle });

Вот документация.

1 голос
/ 19 марта 2012

AFAICT ваш код должен работать. Меня устраивает. Но заголовок отображается только при наведении курсора на маркер. Это не будет отображаться до тех пор. Ваши комментарии создают впечатление, что вы неправильно понимаете, как работают заголовки. Их демонстрация - это событие переезда. Также возможно, что ваша строка заголовка равна нулю или ''.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...