使用 Google Maps API 向标记添加多个字符答案

【问题标题】：Adding multiple characters to markers using Google Maps API使用 Google Maps API 向标记添加多个字符
【发布时间】：2016-09-12 14:54:00
【问题描述】：

问题：

使用 Google Maps API 向标记添加多个字符。

最小工作示例 (MWA)：

在下面的示例中，我在两个机场（PEK 和 FRA）之间绘制了一条线，但标记似乎不允许使用多个字符。

<!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 代码的任何其他解决方案。

【问题讨论】：

谷歌地图标记不允许多个字符（仅一个）..
有没有办法解决这个问题？通过使用标签？
是的……五分钟，我建议一种方法……为此……
我已经更新了答案..
http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters的可能重复

标签： javascript google-maps google-maps-api-3 maps google-maps-markers

【解决方案1】：

如果您需要地图标签，您可以使用名为 google-maps 实用程序库 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

这两个是在谷歌地图中管理标签（或带有标签的标记）的更好解决方案

【讨论】：

【解决方案2】：

工作解决方案（未优化）：

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

【讨论】：