wake-up-neo.com

Textetiketten in Google Maps v3

Ich habe kürzlich in Google Maps von v2 zu v3 gewechselt. Zu den defekten Funktionen zählten Textbeschriftungen, die ich mit einer Drittanbieter-Bibliothek (BpLabel) implementierte.

The text labels in the map

Frage :
Wie kann ich Textetiketten in Google Maps V3 anzeigen, bei denen Ereignisse wie "Mouseover" ausgelöst werden? Hinweis : Ich möchte nicht, dass eine Markierung zusammen mit der Textbeschriftung angezeigt wird. Ich möchte NUR die Textmarke sichtbar sein

Was ich versucht habe :

  • Verwendet InfoWindow, aber es ist zu unübersichtlich und das Overlay muss explizit geschlossen werden, wohingegen das Overlay geschlossen werden muss, wenn der Mauszeiger darüber angezeigt wird
  • Verwendete InfoBox, die nicht so überladen ist wie InfoWindow, aber auch keine Ereignisauslöser wie Mouseover

Jede Hilfe von Personen, die ähnliche Probleme hatten, wird sehr geschätzt.

Prost,
Rohitesh

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
16
Rohitesh

Ich denke, der einzige Weg, dies zu tun, ist die Verwendung von Markern als Beschriftung, d. H. Die Form der Markierung auf die gewünschten Beschriftungen ändern. Zwei Ideen, wie das geht:

1) Verwenden Sie die modifizierten Marken mit benutzerdefinierter Form und Text - z. Bildsymbole, die mit Google Image Charts und Infografiken erstellt wurden (wie hier oder hier ). Die Google-API zum Erstellen solcher Symbole ist jedoch ohne Abhilfe veraltet! Oder nicht? Es gibt eine Verwirrung, siehe meinen Kommentar hier.

2) Verwenden Sie markerwithlabel library (leicht zu finden, indem Sie "google maps text in marker" googeln). Mit dieser Bibliothek können Sie Marken mit Beschriftungen mit oder ohne Markierungssymbol definieren. Wenn Sie das Markierungssymbol nicht möchten, setzen Sie einfach 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: {}
 });

Dann können Sie wie normale Marker damit arbeiten, d. H. InfoWindow für Mouseover-Ereignisse hinzufügen!

Hier ist das Beispiel, wie Sie diese Bibliothek für das benutzen, was Sie brauchen .

Code konkurrieren:

                             <!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>
18
TMS

Sie können InfoBox verwenden, Sie können jedoch keine Hover-Ereignisse verwenden, indem Sie der Map Ereignis-Listener hinzufügen. Sie können Ihren Infoboxen eine Klasse hinzufügen (die Standardklasse ist Infobox). Sie sollten also in der Lage sein, Hover-Ereignisse direkt mit jQuery oder JavaScript hinzuzufügen. Hier ist der Code, den ich verwende, um keine Markierung mit dem Label anzuzeigen:

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);
        }

Dann sollten Sie dazu in der Lage sein, ein Hover-Ereignis zu erstellen: 

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

oder

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

Wenn Sie dies in Aktion sehen müssen:

  1. gehen Sie hier: http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx

  2. Öffnen Sie Ihre Konsole und geben Sie (copy/paste) ein: $ ('. regionLabel'). hover (function () {console.log ('hovered');}, function () {console.log ('unhovered'); }); 

  3. wenn Sie den Mauszeiger über die großen Beschriftungen bewegen, wird der Text in der Konsole ausgegeben.

2
brouxhaha

Sie können Google Maps anweisen, ein Symbol zu verwenden, dessen URL ein SVG-Bild ist. In den meisten Browsern kann dies auch ein Daten-URI sein. Wenn Sie wissen, wie Sie die entsprechende SVG für die Markierung generieren, die Sie clientseitig verwenden möchten, können Sie dies tun und dann eine Base64-Bibliothek verwenden, um die SVG-Zeichenfolge in Base64-Daten zu konvertieren, wobei "data: image/svg + xml; base64, 'und ist dann als Daten-URI verwendbar. 

Beachten Sie, dass der Internet Explorer etwas pingeliger erscheint und ich fand, dass ich die scaledSize -Eigenschaft sowie die üblichen Größen-, Origin-, Anker- und URL-Eigenschaften brauchte, um SVGs zu rendern. 

Auf diese Weise können Sie ein volles SVG-Bild verwenden, einschließlich des Textes mit Stil, so dass Sie dann eine Markierung mit einem Etikett mit dem gewünschten Stil erstellen können.

1
David Burton