如何在 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), set the icon选项：

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

或者，您可以使用具有 HTML/SVG 内容的 H.mapDomIcon, when you use markers (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')

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

document.querySelector('#mapContainer')

标记图标 PNG/SVG 致谢：

Answer 2

如果您从数据库中获取坐标。

<script>
var contractors = <?php echo json_encode($contractors); ?>;
var contractorIcon = new H.map.Icon("https://img.icons8.com/color/64/000000/worker-male.png", {size: {w: 36, h: 36}});
for (let con = 0; con < contractors.length; con++) { 
        var parisMarker = new H.map.Marker(
                 {lat:coordinates[i], lng: coordinates[i+1]}, 
                 {icon: contractorIcon}
);
</script>

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

How to add custom markers icons in Here Maps API 3.0

javascript

maps

here-api

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

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