如何为MapQuest地图的旗帜图标标记添加差异化自定义文本

使用MapQuest JavaScript SDK开发地图应用时，现有代码已完成Quebec、Beaupre、Montmagny三个地点的地理编码，可在地图上渲染旗帜样式的标记图标，需要为每个地点对应的旗帜图标配置独立自定义文本：

• Quebec位置的旗帜图标显示08h00
• Beaupre位置的旗帜图标显示15h00
• 剩余地点可按业务规则自行配置对应显示文本

<html>
  <head>
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

    <script type="text/javascript">
      window.onload = function() {
        L.mapquest.key = '';

        // Geocode three locations, then call the createMap callback
        L.mapquest.geocoding().geocode(['Quebec,Qc', 'Beaupre,Qc', 'Montmagny,Qc'], createMap);

        function createMap(error, response) {
          // Initialize the Map
          var map = L.mapquest.map('map', {
            layers: L.mapquest.tileLayer('map'),
            center: [0, 0],
            zoom: 12
          });

          // Generate the feature group containing markers from the geocoded locations
          var featureGroup = generateMarkersFeatureGroup(response);

          // Add markers to the map and zoom to the features
          featureGroup.addTo(map);
          map.fitBounds(featureGroup.getBounds());
        }

        function generateMarkersFeatureGroup(response) {
          var group = [];
          for (var i = 0; i < response.results.length; i++) {
            var location = response.results[i].locations[0];
            var locationLatLng = location.latLng;

            // Create a marker for each location
            var marker = L.marker(locationLatLng, {icon: L.mapquest.icons.flag()})
                           
              .bindPopup(location.adminArea5 + ', ' + location.adminArea3);

            group.push(marker);
          }
          return L.featureGroup(group);
        }
      }
    </script>
  </head>

  <body style="border: 0; margin: 0;">
    <div id="map" style="width: 100%; height: 530px;"></div>
  </body>
</html>

L.mapquest.icons.flag()构造函数支持传入配置项自定义旗帜上的显示文本，核心修改逻辑如下：

• 按照传入地理编码接口的地点顺序，维护每个地点对应的自定义文本映射数组
• 循环生成标记时，取出当前索引对应的自定义文本，传入flag配置的primary字段，该字段控制旗帜主体区域的显示内容

修改后完整代码 #

<html>
  <head>
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

    <script type="text/javascript">
      window.onload = function() {
        L.mapquest.key = '';
        // 按地理编码地址顺序定义每个地点旗帜上显示的自定义文本，第三个值可按需替换
        var flagTextMap = ['08h00', '15h00', '19h00'];
        var locationList = ['Quebec,Qc', 'Beaupre,Qc', 'Montmagny,Qc'];

        // Geocode three locations, then call the createMap callback
        L.mapquest.geocoding().geocode(locationList, createMap);

        function createMap(error, response) {
          // Initialize the Map
          var map = L.mapquest.map('map', {
            layers: L.mapquest.tileLayer('map'),
            center: [0, 0],
            zoom: 12
          });

          // Generate the feature group containing markers from the geocoded locations
          var featureGroup = generateMarkersFeatureGroup(response);

          // Add markers to the map and zoom to the features
          featureGroup.addTo(map);
          map.fitBounds(featureGroup.getBounds());
        }

        function generateMarkersFeatureGroup(response) {
          var group = [];
          for (var i = 0; i < response.results.length; i++) {
            var location = response.results[i].locations[0];
            var locationLatLng = location.latLng;

            // 传入primary参数设置旗帜显示文本
            var marker = L.marker(locationLatLng, {
              icon: L.mapquest.icons.flag({
                primary: flagTextMap[i]
              })
            })
              .bindPopup(location.adminArea5 + ', ' + location.adminArea3);

            group.push(marker);
          }
          return L.featureGroup(group);
        }
      }
    </script>
  </head>

  <body style="border: 0; margin: 0;">
    <div id="map" style="width: 100%; height: 530px;"></div>
  </body>
</html>

提示：如果需要根据地点名而非顺序匹配文本，可以在循环内通过location.adminArea5（城市名）做键值对匹配，避免地址顺序调整导致文本显示错位。

内容的提问来源于stack exchange，提问作者Abs olu