个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 09:39:29 24 4
gpt4 key购买 nike

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

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

Link to the docs of 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);

谢谢。

最佳答案

要将自定义图像指定为标记图标，请创建 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.mapDomIcon ，当您对 HTML/SVG 内容使用标记 ( 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 设置默认标记图标(例如 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>元素，将用作 map 容器: 
document.querySelector('#mapContainer')

标记图标 PNG/SVG 学分:
  • https://www.iconfinder.com/iconsets/daily-boxes
  • https://www.flaticon.com/authors/roundicons
  • https://www.iconfinder.com/iconsets/tourism
  • https://www.flaticon.com/authors/freepik

    • 关于javascript - 如何在 Here Maps API 3.0 中添加自定义标记图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51341326/

    24 4 0
    文章推荐： sql-server - SQL 查询获取每个博客帖子的最新用户评论仅限于每个用户一个？
    文章推荐： powershell - 对于PowerShell cmdlet，是否可以始终将脚本 block 传递给字符串参数？
    文章推荐： ffmpeg 找不到编码器 'libvorbis'
    文章推荐： nhibernate - 将来自文件的数据库配置与 Fluent NHibernate 映射混合
    行者123
    个人简介

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

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