个人中心
gpt4 book ai didi

javascript - 使用 Google Maps API 将多个字符添加到标记

转载 作者：行者123 更新时间：2023-12-03 06:56:15 25 4
gpt4 key购买 nike

问题:

使用 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>

所需输出:

  1. 获取标记以处理多个字符。
  2. 添加至少包含 3 个字符的标签。
  3. 任何其他可显示机场 IATA 代码的解决方案。

最佳答案

如果您需要 map 标签，您可以使用名为 google-maps 实用程序库 v3 map 标签的扩展库..

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

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

关于javascript - 使用 Google Maps API 将多个字符添加到标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37260320/

25 4 0
文章推荐： javascript - 如何在 React Native 中绘制图表？
文章推荐： javascript - 如何在提交表单时将 PHP 变量传递到 Javascript cookie 中？
文章推荐： javascript - 从第三个函数的异步第一个函数获取结果的更好方法是什么？
文章推荐： javascript - Breeze 获取实体而不是对象的集合
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com