Добавление нескольких символов для маркеров с помощью Google Maps API

Проблема:Добавление нескольких символов для маркеров с помощью Google Maps API

Добавление нескольких символов для маркеров с помощью Google Maps API.

Minimal Рабочий пример (МДЖ):

В приведенном ниже примере I карта линию между двумя аэропортами (ПЭК и АОП), но маркеры, кажется, не позволяют нескольких символов.

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

Желаемый результат:

Получить маркеры для работы с несколькими персонажами.
Добавить ярлыки, допускающие не менее 3 символов.
Любое другое решение, которое будет показывать код IATA для аэропортов.

источник

2016-05-16 kexxcream

Google карта маркер не позволяет множественный характера (один только) .. – scaisEdge

Есть ли способ обойти это? Используя метки? – kexxcream

Да ... пять минут, и я предлагаю способ .. для этого .. – scaisEdge

Если вам нужна этикетка на карту, вы можете использовать библиотеку расширения под названием Google-карта утилита Библиотека v3 карта этикетка ..

Вы можете найти код на: https://github.com/googlemaps/js-map-label

добавить эту библиотеку в свой

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

или вы также можете использовать https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel

Эти два являются лучшим решением для управления этикеткой (или маркеры с ярлыком) в Google Maps

источник

2016-05-16 18:30:07 scaisEdge

Рабочий раствор (не оптимизированный):

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

источник

2016-05-16 21:18:51 kexxcream

Добавление нескольких символов для маркеров с помощью Google Maps API

ответ

Смежные вопросы