Niedawno migrowałem z V2 do V3 na Mapach Google, a jedną z funkcjonalności, które złamały, użyto etykiet tekstowych, które wdrażałem przy użyciu biblioteki osób trzecich (BPLabel)

The text labels in the map

Pytanie :
Jak mogę wyświetlić etykiety tekstowe w Google Maps V3, które mają wydarzenia, takie jak "Mousever", które się wywołały? Uwaga : Nie chcę, aby marker był widoczny wzdłuż etykiety tekstowej. Chcę tylko widać tylko tekstu

Co próbowałem :

  • Używany Infowindow, ale jest zbyt zaśmiecony, a nakładka musi być wyraźnie zamknięta, podczas gdy potrzebuję nakładki, która ma być zamknięta, gdy wskaźnik myszy unosi się nad nim
  • Używany Infobox, który nie jest tak zaśmiecony jak Infowaindow, ale to również nie ma wyzwalaczy zdarzeń, takich jak motor

Każda pomoc od każdego, kto ma podobne problemy, będzie bardzo doceniona.

Pozdrawiam,
. Rohitesh.

17
Rohitesh 22 listopad 2013, 10:56

3 odpowiedzi

Najlepsza odpowiedź

Myślę, że jedynym sposobem na to jest użycie znaczników jako etykiet, tj. Zmień kształt markera na żądane etykiety. Dwa pomysły, jak to zrobić:

1) Użyj zmodyfikowanych markerów z niestandardowym kształtem i tekstem - np. Ikony obrazu generowane za pomocą Google Wykresy obrazów i Infografiki (jak Oto lub Oto). Ale The Google API, aby utworzyć takie ikony, jest przestarzały bez lekarium! Albo nie jest? jest zamieszanie, zobacz mój komentarz tutaj.

2) Użyj MarkerWithlabel Library (Znaleziono łatwo przez Googling" Tekst Google Maps w markerze "). Dzięki tej bibliotece można zdefiniować markery z etykietami z ikonami lub bez znaczników. Jeśli nie chcesz ikony znacznika, wystarczy ustaw icon: {}:

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

Wtedy możesz z nim współpracować z normalnym markerem, tj. Dodaj Infowindow do wydarzeń myszy!

Oto przykład, jak korzystać z tej biblioteki dla tego, czego potrzebujesz.

Rywalizuj kod:

                             <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Mouse Events</title>
 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     border: 2px solid black;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>-->
 <script type="text/javascript" src="markerwithlabel.js"></script>
 <script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = 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: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       icon: {}
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });

var ibOptions = {
    content: 'content'
    // other options
};

var ib = new google.maps.InfoWindow(ibOptions);

ib.open(map, this);
     google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); });
     google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); });


   }

 </script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
</body>
</html>
19
Community 23 maj 2017, 11:55

Możesz użyć Infobox, ale nie można używać z nim wydarzenia w Hover, dodając słuchaczy zdarzeń na mapę. Możesz dodać klasę do swoich pola informacyjnego (domyślna klasa jest infobox), więc powinieneś być w stanie dodać wydarzenia na Hover bezpośrednio do tego za pomocą jQuery lub JavaScript. Oto kod, którego używam, aby nie wyświetlać markera z etykietą:

var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ],
    regionsOptions = [],
    regionLabel = [];

for(var r=0; r<regionsMarkerInfo.length; r++){
          regionsOptions[r] = {
           content: "<a href='http://"+window.location.host+"/Destinations/Regions/" +  regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>"
          ,boxStyle: {
            textAlign: "left"
            ,fontSize: "18px"
            ,whiteSpace: "nowrap"
            ,lineHeight: "16px"
            ,fontWeight: "bold"
            ,fontFamily: "Tahoma"
           }
          ,disableAutoPan: true
          ,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1])
          ,closeBoxURL: ""
          ,isHidden: false
          ,pane: "floatPane"
          ,enableEventPropagation: true
          ,boxClass: "regionLabel"
          };

          regionLabel[r] = new InfoBox(regionsOptions[r]);
          regionLabel[r].open(map);
        }

Wtedy powinieneś zrobić to, aby utworzyć wydarzenie w Hover:

$('.regionLabel').hover(function(){}, function(){});

Lub

document.getElementsByClassName('regionLabel).addEventListener('mouseover', ... )

Jeśli chcesz to zobaczyć w akcji:

  1. Idź tutaj: http://travelalaska.dawleyassiciates.com/destinations/region.aspx

  2. Otwórz konsolę i wpisz (Kopiuj / Wklej): $ ('. RegionLabel'). Hover (Funkcja () {Console.log ("Hovered ');}, Funkcja () {Console.log (" Nieczysty "); });

  3. Najedź nad dużymi etykietami, a zobaczysz wyjście tekstowe w konsoli.

2
brouxhaha 24 listopad 2013, 17:30

Możesz powiedzieć Mapy Google, aby użyć ikony, której adres URL jest obrazem SVG. W większości przeglądarkach może to być także URI danych. Jeśli wiesz, jak wygenerować odpowiednią SVG dla markera, który chcesz klient, możesz to zrobić, a następnie użyć biblioteki Base64, aby przekonwertować ciąg SVG do danych Base64, przedrostek "Data: Image / SVG + XML; BASE64, "I jest następnie użyteczny jako URI danych.

Należy pamiętać, że Internet Explorer wydaje się trochę bardziej wybredny, a ja znalazłem, że potrzebowałem właściwości skaledsize, a także zwykłego rozmiaru, pochodzenia, kotwicy i właściwości URL, aby uzyskać jakąkolwiek SVG.

Takie podejście umożliwia korzystanie z pełnego obrazu SVG, w tym stylowego tekstu, dzięki czemu można utworzyć znacznik z etykietą z dowolnym stylizacji.

1
David Burton 17 czerwiec 2015, 14:55