时间戳

首页 > 解决方案 > 如何在 Here Maps API 3.0 中添加自定义标记图标

javascript - 如何在 Here Maps API 3.0 中添加自定义标记图标

问题描述

我想使用带有 JavaScript 的Here Maps使用自定义标记，但我尝试了文档，不幸的是我不明白如何使用自定义图标设置自定义标记。

在下面的示例中，我设置了一个位置和标记，但我不知道如何使用.png或.svg图标设置我的自定义标记并设置为默认标记。

链接到 Here Maps 的文档

function addMarkersToMap(map) {
  var parisMarker = new H.map.Marker({
    lat: 48.8567,
    lng: 2.3508
  });
  map.addObject(parisMarker);

  var romeMarker = new H.map.Marker({
    lat: 41.9,
    lng: 12.5
  });
  map.addObject(romeMarker);

  var berlinMarker = new H.map.Marker({
    lat: 52.5166,
    lng: 13.3833
  });
  map.addObject(berlinMarker);

  var madridMarker = new H.map.Marker({
    lat: 40.4,
    lng: -3.6833
  });
  map.addObject(madridMarker);

  var londonMarker = new H.map.Marker({
    lat: 51.5008,
    lng: -0.1224
  });
  map.addObject(londonMarker);
}

// Initialize the platform object:
const platform = new H.service.Platform({
  app_id: 'XXXXXXXXXXXXXX',
  app_code: 'XXXXXXXXXXX',
  useCIT: true,
  useHTTPS: true,
});

const maptypes = platform.createDefaultLayers();

// Instantiate (and display) a map object:
this.map = new H.Map(
  this.$el.querySelector('#mapContainer'),
  maptypes.normal.map, {
    zoom: 4,
    center: {
      lat: 50,
      lng: 5
    },
  },
);

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

// Create the default UI components
var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');

// Now use the map as required...
addMarkersToMap(this.map);

谢谢。

标签： javascriptmapshere-api

解决方案

要将自定义图像指定为标记图标，请使用您的图像（和自定义选项，如果需要）H.map.Icon创建一个实例：

// using a PNG icon with its natural size (which is 32x32 in this case)
var pngIcon = new H.map.Icon("https://cdn0.iconfinder.com/data/icons/daily-boxes/150/phone-box-32.png");      

// optionally - resize a larger PNG image to a specific size
var pngIcon = new H.map.Icon("https://cdn3.iconfinder.com/data/icons/tourism/eiffel200.png", {size: {w: 56, h: 56}});

// optionally - resize a larger SVG image to a specific size
var svgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/190/190488.svg", {size: {w: 32, h: 32}});

然后，在创建特定标记（H.map.Marker）时，将icon选项设置为自定义图标：

var marker = new H.map.Marker({
    lat: 48.8567,
    lng: 2.3508
  }, {
    icon: customIcon
  }
);

或者，当您将标记 ( H.map.DomMarker ) 与 HTML/SVG 内容一起使用时，您可以使用H.mapDomIcon 。

具有不同 PNG 和 SVG 标记图标的示例

#mapContainer {
  width: 100%;
  height: 400px;
  background: grey;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>

<body>
  <div id="mapContainer"></div>
  <script>
    function addMarkersToMap(map) {
      // icons
      // resize a larger PNG image to a specific size
      var parisPngIcon = new H.map.Icon("https://cdn3.iconfinder.com/data/icons/tourism/eiffel200.png", {size: {w: 56, h: 56}});
      
      // resize a larger SVG image to a specific size
      var romeSvgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/190/190488.svg", {size: {w: 32, h: 32}});
      
      // resize another larger SVG image to a specific size
      var berlinSvgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/762/762831.svg", {size: {w: 24, h: 24}});
      
      // resize another larger SVG image to a specific size
      var madridSvgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/738/738671.svg", {size: {w: 32, h: 32}});
            
      // using the PNG icons natural size (which is 32x32 in this case)
      var londonPngIcon = new H.map.Icon("https://cdn0.iconfinder.com/data/icons/daily-boxes/150/phone-box-32.png");
      
      // markers
      var parisMarker = new H.map.Marker({
        lat: 48.8567,
        lng: 2.3508
      }, {icon: parisPngIcon});
      map.addObject(parisMarker);

      var romeMarker = new H.map.Marker({
        lat: 41.9,
        lng: 12.5
      }, {icon: romeSvgIcon});
      map.addObject(romeMarker);

      var berlinMarker = new H.map.Marker({
        lat: 52.5166,
        lng: 13.3833
      }, {icon: berlinSvgIcon});
      map.addObject(berlinMarker);

      var madridMarker = new H.map.Marker({
        lat: 40.4,
        lng: -3.6833
      }, {icon: madridSvgIcon});
      map.addObject(madridMarker);

      var londonMarker = new H.map.Marker({
        lat: 51.5008,
        lng: -0.1224
      }, {icon: londonPngIcon});
      map.addObject(londonMarker);
    }

    // Initialize the platform object:
    const platform = new H.service.Platform({
      app_id: 'DemoAppId01082013GAL',
      app_code: 'AJKnXv84fjrb0KIHawS0Tg',
      useCIT: true,
      useHTTPS: true
    });

    const maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    this.map = new H.Map(
      document.querySelector('#mapContainer'),
      maptypes.normal.map, {
        zoom: 4,
        center: {
          lat: 50,
          lng: 5
        },
      },
    );

    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');

    // Now use the map as required...
    addMarkersToMap(this.map);
  </script>
</body>
</html>

默认标记图标为 PNG 或 SVG 的示例

#mapContainer {
  width: 100%;
  height: 400px;
  background: grey;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>

<body>
  <div id="mapContainer"></div>
  <script>
    function addMarkersToMap(map) {
      // default icon (PNG or SVG can be used also)
      var defaultIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/252/252025.svg", {size: {w: 32, h: 32}});
            
      // markers
      var parisMarker = new H.map.Marker({
        lat: 48.8567,
        lng: 2.3508
      }, {icon: defaultIcon});
      map.addObject(parisMarker);

      var romeMarker = new H.map.Marker({
        lat: 41.9,
        lng: 12.5
      }, {icon: defaultIcon});
      map.addObject(romeMarker);

      var berlinMarker = new H.map.Marker({
        lat: 52.5166,
        lng: 13.3833
      }, {icon: defaultIcon});
      map.addObject(berlinMarker);

      var madridMarker = new H.map.Marker({
        lat: 40.4,
        lng: -3.6833
      }, {icon: defaultIcon});
      map.addObject(madridMarker);

      var londonMarker = new H.map.Marker({
        lat: 51.5008,
        lng: -0.1224
      }, {icon: defaultIcon});
      map.addObject(londonMarker);
    }

    // Initialize the platform object:
    const platform = new H.service.Platform({
      app_id: 'DemoAppId01082013GAL',
      app_code: 'AJKnXv84fjrb0KIHawS0Tg',
      useCIT: true,
      useHTTPS: true
    });

    const maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    this.map = new H.Map(
      document.querySelector('#mapContainer'),
      maptypes.normal.map, {
        zoom: 4,
        center: {
          lat: 50,
          lng: 5
        },
      },
    );

    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');

    // Now use the map as required...
    addMarkersToMap(this.map);
  </script>
</body>
</html>

据我所知，没有这样的功能可以为地图设置默认标记图标（例如map.setDefaultMarkerIcon(...)）。在实例化标记时，您只需创建一个可以使用的自定义图标：

var icon = new H.map.Icon("...");
var marker = new H.map.Marker({lat: 48.8567, lng: 2.3508}, {icon: icon});

或者将标记创建封装到 afunction中并通过以下方式创建标记：

var defaultIcon = new H.map.Icon("...");  

function createMarker(lat, lng) {
  return new H.map.Marker({lat: lat, lng: lng}, {icon: defaultIcon});
}

var marker = createMarker(48.8564, 2.3564);

有关自定义标记及其图标的更多信息

此外，您的示例代码还有一些剩余代码可能会导致错误，如果没有注意到：

this.$el.querySelector('#mapContainer')

所以为了提供一个工作示例，我只是使用了一个更简单的解决方案来选择<div>元素，该元素将用作地图容器：

document.querySelector('#mapContainer')

标记图标 PNG/SVG 学分：

推荐阅读