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

Question

我想使用Here Maps和JavaScript一起使用自定义标记，但我尝试了文档，遗憾的是我不明白如何使用自定义图标设置自定义标记。

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

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);

谢谢。

Answer 1

要将自定义图像指定为标记图标，请使用您的图像创建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
  }
);

或者，当您使用带有HTML / SVG内容的标记（H.mapDomIcon）时，您可以使用H.map.DomMarker。

使用不同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});

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

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);

More information about customizing markers and their icons

此外，您的示例代码还有一些可能导致错误的剩余代码，而不会引起注意：

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

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

document.querySelector('#mapContainer')

标记图标PNG / SVG致谢：

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

问题描述投票：2回答：1

1个回答

使用不同PNG和SVG标记图标的示例

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

最新问题

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

问题描述 投票：2回答：1

1个回答

使用不同PNG和SVG标记图标的示例

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

最新问题

问题描述投票：2回答：1