web-dev-qa-db-fra.com

Étiquettes de texte sur Google Maps v3

J'ai récemment migré de v2 à v3 sur Google Maps, et l'une des fonctionnalités défaillantes était l'utilisation d'étiquettes de texte, que je mettais en œuvre à l'aide d'une bibliothèque tierce (BpLabel).

The text labels in the map

Question :
Comment puis-je afficher des étiquettes de texte dans Google Maps v3, qui ont des événements tels que le "survol" qui sont déclenchés? Note : Je ne veux pas qu'un marqueur soit visible avec l'étiquette de texte. Je veux que SEUL le libellé soit visible

Ce que j'ai essayé :

  • Utilisé InfoWindow, mais il est trop encombré et la superposition doit être explicitement fermée, alors que j'ai besoin que la superposition soit fermée lorsque le pointeur de la souris le survole
  • Utilisé InfoBox, qui n'est pas aussi encombré qu'InfoWindow, mais cela n'a pas non plus de déclencheurs d'événements comme mouseover

Toute aide de la part de quiconque ayant rencontré des problèmes similaires sera très appréciée.

À votre santé,
Rohitesh

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

Je pense que la seule façon d’y parvenir est d’utiliser des marqueurs comme étiquettes, c’est-à-dire de changer la forme du marqueur en vos étiquettes souhaitées. Deux idées pour faire ça:

1) Utilisez les marqueurs modifiés avec une forme et un texte personnalisés - par exemple. icônes d’image générées à l’aide de Google Graphiques d’image et Infographie (comme ici ou ici ). Mais l'API Google pour créer de telles icônes est déconseillée! Ou n'est pas ?? Il y a une confusion, voir mon commentaire ici.

2) Utilisez marqueur avec la bibliothèque d'étiquettes (trouvé facilement en googlant "Google Maps texte dans marqueur"). Avec cette bibliothèque, vous pouvez définir des marqueurs avec des étiquettes avec ou sans icônes de marqueur. Si vous ne voulez pas l'icône du marqueur, définissez simplement 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: {}
 });

Ensuite, vous pouvez l’utiliser comme avec un marqueur normal, c’est-à-dire ajouter InfoWindow pour les événements survolés!

Voici l'exemple d'utilisation de cette bibliothèque pour ce dont vous avez besoin .

Code de compétition:

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

Vous pouvez utiliser InfoBox, mais vous ne pouvez pas utiliser les événements survolés en ajoutant des écouteurs d’événements à la carte. Vous pouvez ajouter une classe à vos zones d'information (la classe par défaut est Infobox). Vous devriez donc pouvoir ajouter des événements de survol directement à cette action à l'aide de jQuery ou JavaScript. Voici le code que j'utilise pour ne pas afficher de marqueur avec l'étiquette:

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

Ensuite, vous devriez pouvoir faire cela pour créer un événement de survol: 

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

ou

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

Si vous avez besoin de voir cela en action:

  1. allez ici: http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx

  2. ouvrez votre console et tapez (copier/coller): $ ('. regionLabel'). hover (function () {console.log ('survolé');}, function () {console.log ('non survolé'); }); 

  3. survolez les grandes étiquettes et vous verrez la sortie texte dans la console.

2
brouxhaha

Vous pouvez indiquer à Google Maps d'utiliser une icône dont l'URL est une image SVG. Dans la plupart des navigateurs, il peut également s'agir d'un URI de données. Si vous savez générer le fichier SVG approprié pour le marqueur que vous souhaitez utiliser côté client, vous pouvez le faire, puis utiliser une bibliothèque Base64 pour convertir la chaîne SVG en données Base64, préfixez-le avec le paramètre 'data: image/svg + xml; base64 ', et il est ensuite utilisable en tant qu'URI de données. 

Notez qu'Internet Explorer semble un peu plus difficile, et j'ai trouvé que j'avais besoin de la propriété scaledSize ainsi que des propriétés habituelles de size, Origin, anchor et url pour rendre tout SVG rendu. 

Cette approche vous permet d’utiliser une image SVG complète, y compris un texte stylé, afin de pouvoir ensuite créer un marqueur avec une étiquette avec le style souhaité.

1
David Burton