Question

问题：

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

Answer 1

如果您需要地图标签，可以使用名为google-maps utility library v3 map label的扩展库。

您可以在以下位置找到代码：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

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

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

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

2 个答案: