如何在 HERE 地图中显示包含指向其他 svg 链接的 svg 标记？

Question

我正在尝试使用 HERE Javascript API 显示 svg 标记。我遵循了 documentation，但是我的扭曲是我的 svg 包含指向其他 svg 的链接。这样做的原因是我想显示具有相同引脚形状但在引脚中心有不同图标的标记。由于这些图标也会在我网站的其他地方使用，所以单独保存 svgs 是有意义的，这样它们只需要在一个地方更新。

我可以让标准 svg 显示为标记，但是当我尝试嵌套 svg 时，地图上没有显示任何标记。

到目前为止，这是我的代码：

pin.svg - 这是所有标记将使用的基本引脚形状

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="46.093765"
   height="63.352634">
  <g
     transform="translate(-8.9327811,-0.45623957)"
     id="layer1">
    <path
       d="M 22.15625,0 A 21.544797,22.053723 0 0 0 0,22.0625 21.544797,22.053723 0 0 0 10.40625,40.9375 c 1.062265,1.795846 11.125,19.40625 11.125,19.40625 l 12.125,-20.0625 A 21.544797,22.053723 0 0 0 43.09375,22.0625 21.544797,22.053723 0 0 0 22.15625,0 z"
       transform="translate(10.432788,1.9651232)"
       id="path5014"
       style="fill:#cccccc;fill-opacity:1;stroke:#6e6e6e;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
    <path
       d="m 50.723066,23.370655 a 17.218699,16.540131 0 1 1 -34.437397,0 17.218699,16.540131 0 1 1 34.437397,0 z"
       transform="matrix(0.94189641,0,0,1.0010512,0.4199413,0.48436132)"
       id="path5019"
       style="fill:#ffffff;fill-opacity:1;stroke:none" />
  </g>
</svg>

here-example.svg - 这是来自 HERE 站点的示例。我将它用作放置在图钉内的图标

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
    <rect stroke="black" fill="red" x="1" y="1" width="22" height="22" />
    <text x="12" y="18" font-size="12pt" font-family="Arial" font-weight="bold" text-anchor="middle" fill="yellow">
    C
    </text>
</svg>

pin-with-icon.svg - 这是我的嵌套 svg - 它拉入图钉和图标并与它们重叠

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <image x="20" y="20" width="300" height="80" xlink:href="pin.svg" />
    <image x="120" y="32" width="100" height="30" xlink:href="here-example.svg" />
</svg>

index.html - 这是使用 HERE 地图的地方，我尝试显示标记。它大量使用 HERE 开发人员文档。将 <App_ID> 和 <App_Code> 替换为 HERE 凭据。在此页面中，我还尝试将有问题的 svg 加载到 div 中以证明它有效。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  </head>
  <body>
    <div style="width: 640px; height: 480px" id="mapContainer"></div>

    <!-- Display the svg just to prove that the loads correctly -->
    <div id="svgPin"></div>

    <script>
      // Initialize the platform object:
      var platform = new H.service.Platform({
        'app_id': '<App_ID>',
        'app_code': '<App_Code>'
      });

      // Obtain the default map types from the platform object
      var maptypes = platform.createDefaultLayers();

      // Instantiate (and display) a map object:
      var map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.normal.map,
        {
          zoom: 6,
          center: { lng: 13.4, lat: 52.51 }
        });

        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Example with svg pins not showing (svg contains links to other svgs)
        var svgMarkupRetrieval = $.get('pin-with-icon.svg', function (svg) {

            // Just to prove that the svg is loaded correctly
            $('#svgPin').html(svg);

            var icon = new H.map.Icon(svg);

            // Add the first marker
            var marker1 = new H.map.Marker({ lat: 52.4, lng: 13.3 },
                { icon: icon });

            map.addObject(marker1);

            // Add the second marker.
            var marker2 = new H.map.Marker({ lat: 51.45, lng: 13.3 },
                { icon: icon });

            map.addObject(marker2);
        }, 'text');


        // Example with svg pins showing (from HERE developer guide)
        var svgMarkupRetrieval = $.get('here-example.svg', function (svg) {
            var icon = new H.map.Icon(svg);

            // Add the first marker
            var marker3 = new H.map.Marker({ lat: 50.4, lng: 13.3 },
                { icon: icon });

            map.addObject(marker3);

            // Add the second marker.
            var marker4 = new H.map.Marker({ lat: 49.45, lng: 13.3 },
                { icon: icon });

            map.addObject(marker4);
        }, 'text');
    </script>
  </body>
</html>

要使用代码，请使用我指定的名称创建每个文件并将它们放在 IIS 中的文件夹中。 index.html必须通过IIS运行，否则会出现跨源请求错误。

pin-with-icon.svg 单独加载（我在地图下加载），标准 svg 标记也是如此。但是我不明白为什么我使用 pin-with-icon.svg 创建的标记没有显示在地图上。任何帮助将不胜感激。

Answer 1

使用H.map.DomMarker和H.map.DomIcon

如何在 HERE 地图中显示包含指向其他 svg 链接的 svg 标记？

How to display svg markers that contain links to other svgs in HERE maps?

svg

here-api