Hinzufügen mehrerer Zeichen zu Markern mit Google Maps API

Problem:Hinzufügen mehrerer Zeichen zu Markern mit Google Maps API

mehrere Zeichen Markierungen mit Google Maps API Hinzufügen.

Minimal Arbeitsbeispiel (MWA):

Im Beispiel unten I Karte eine Linie zwischen zwei Flughäfen (PEK und FRA), aber die Markierungen scheinen nicht für mehrere Zeichen zu ermöglichen.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Polyline</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var flightPath; 
     var map; 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: 39.782, lng: 116.387}, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

     var flightPathCoordinates = [ 
      {lat: 39.782, lng: 116.387}, 
      {lat: 50.026, lng: 8.543} 
     ]; 

     var myPEK = {lat: 39.782, lng: 116.387}; 
     var myFRA = {lat: 50.026, lng: 8.543}; 

     flightPath = new google.maps.Polyline({ 
      path: flightPathCoordinates, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 


     addLine(); 

     var marker = new google.maps.Marker({ 
      position: myPEK, 
      map: map, 
      label: 'PEK', 
      title: 'Beijing' 
     }); 

     var marker = new google.maps.Marker({ 
      position: myFRA, 
      map: map, 
      label: 'FRA', 
      title: 'Frankfurt' 
     }); 

     } 

     function addLine() { 
     flightPath.setMap(map); 
     } 

    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrI9AcuDk0DxHVFjbAsSZz2DMm4zqsdCA&callback=initMap"> 
    </script> 
    </body> 
</html>

gewünschte Ausgabe:

Erhalten Sie Marker mit mehreren Charakteren zu arbeiten.
Fügen Sie Beschriftungen hinzu, die mindestens 3 Zeichen umfassen.
Jede andere Lösung, die den IATA-Code für die Flughäfen zeigen würde.

Quelle

2016-05-16 kexxcream

Google Maps Marker erlaubt nicht mehr Zeichen (nur ein) .. – scaisEdge

Gibt es eine Möglichkeit, dies zu umgehen? Durch die Verwendung von Etiketten? – kexxcream

Ja ... fünf Minuten und ich schlage einen Weg .. für diese .. – scaisEdge

Wenn Sie eine Karte Etikett Sie eine Erweiterung Bibliothek verwenden können Google-Maps-Dienstprogramm Bibliotheken v3 Karte Label namens ..

Sie den Code finden Sie unter: https://github.com/googlemaps/js-map-label

diese Bibliothek hinzufügen Ihren

  aMapLabel = new MapLabel({ 
      text: 'Your Text', 
      position: mapLabelCenter, 
      strokeColor: '#FFFFFF',  
      fontColor: '#FFFFFF',    
      map: map, 
      fontSize: 24, 
      strokeWeight: 0, 
      align: 'left' 
     }); 

     marker.bindTo('map', aMapLabel); 
     marker.bindTo('position', aMapLabel);

oder Sie können auch https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel

Diese beiden verwenden sind die bessere Lösung für die Etiketten (oder Markierungen mit Label) verwalten in google

Quelle

2016-05-16 18:30:07 scaisEdge

Arbeitslösung (nicht optimierte) Karten:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <title>TravelTools Google Map</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script> 

    <script> 
     var flightPath; 
     var map; 

     function init() { 

     var myLatlng = new google.maps.LatLng(39.782, 116.387); 
     var myOptions = { 
      zoom: 3, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var flightPathCoordinatesPEKFRA = [ 
      {lat: 39.782, lng: 116.387}, 
      {lat: 50.026, lng: 8.543} 
     ]; 

     var flightPathCoordinatesPEKCDG = [ 
      {lat: 39.782, lng: 116.387}, 
      {lat: 49.012, lng: 2.55} 
     ]; 

     flightPathPEKFRA = new google.maps.Polyline({ 
      path: flightPathCoordinatesPEKFRA, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     flightPathPEKCDG = new google.maps.Polyline({ 
      path: flightPathCoordinatesPEKCDG, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     var map = new google.maps.Map(document.getElementById('map'), myOptions); 

     flightPathPEKFRA.setMap(map); 
     flightPathPEKCDG.setMap(map); 

     // PEK 
     var myPEK = new MapLabel({ 
      text: 'PEK', 
      position: new google.maps.LatLng(39.782, 116.387), 
      map: map, 
      fontSize: 11, 
      align: 'center' 
     }); 

     myPEK.set('position', new google.maps.LatLng(39.782, 116.387)); 
     var marker = new google.maps.Marker(); 
     marker.bindTo('map', myPEK); 
     marker.bindTo('position', myPEK); 

     // FRA 
     var myFRA = new MapLabel({ 
      text: 'FRA', 
      position: new google.maps.LatLng(50.026, 8.543), 
      map: map, 
      fontSize: 11, 
      align: 'center' 
     }); 
     myFRA.set('position', new google.maps.LatLng(50.026, 8.543)); 

     var marker = new google.maps.Marker(); 
     marker.bindTo('map', myFRA); 
     marker.bindTo('position', myFRA); 

     // CDG 
     var myCDG = new MapLabel({ 
      text: 'CDG', 
      position: new google.maps.LatLng(49.012, 2.55), 
      map: map, 
      fontSize: 11, 
      align: 'center' 
     }); 
     myCDG.set('position', new google.maps.LatLng(49.012, 2.55)); 

     var marker = new google.maps.Marker(); 
     marker.bindTo('map', myCDG); 
     marker.bindTo('position', myCDG); 

     marker.setDraggable(true); 
     } 

     google.maps.event.addDomListener(window, 'load', init); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
</html>

Quelle

2016-05-16 21:18:51 kexxcream

Hinzufügen mehrerer Zeichen zu Markern mit Google Maps API

Antwort

Verwandte Themen