如何在此地图中添加自定义图像标记?

时间:2015-02-11 06:09:24

标签: javascript maps markers here-api

如何在此地图中添加自定义图像标记, 我可以使用以下代码在地图中添加标记:

 var map, standardMarker;
 map = new nokia.maps.map.Display(mapContainer, {
 center: [lat, log],
 zoomLevel: 12,
 components: [new nokia.maps.map.component.Behavior(), 
 new nokia.maps.map.component.ZoomBar(), 
 new nokia.maps.map.component.TypeSelector()]
  });
 standardMarker = new nokia.maps.map.StandardMarker(map.center);
 map.objects.add(standardMarker);

但问题是地图包含许多标记,所以我需要小的自定义标记。 任何人都可以帮助我!?

2 个答案:

答案 0 :(得分:2)

nokia.maps是旧版本的HERE地图JavaScript API版本2.5,您可以使用HERE地图JS API 3.0的新版本。我建议新开发使用最新的3.0版本。

https://developer.here.com/documentation 以及一些例子http://developer.here.com/api-explorer

   /**
     * Step 1: initialize communication with the platform
     */
    var platform = new H.service.Platform({
        app_id: hereMapAppID,
        app_code: hereMapAppCode,
        useHTTPS: true,
        useCIT: false
    });
    var defaultLayers = platform.createDefaultLayers();

    var mapContainer = document.getElementById('hereMapDivId');

    //Step 2: initialize a map  - not specificing a location will give a   whole world view.
    var map = new H.Map(mapContainer,
            defaultLayers.normal.map,{
            center: {lat: 53.430, lng: -2.961},
            zoom: 7
            });

    //Step 3: make the map interactive
    // 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));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(map, defaultLayers);

    var yourMarker  =   baseUrl+'/images/ico/your_marker.png';
    var icon = new H.map.Icon(yourMarker);
    marker = new H.map.Marker(map.center, { icon: icon });
    var group = new H.map.Group();
    map.addObject(group);
    group.addObject(marker);

答案 1 :(得分:1)

从您的系统添加自定义标记

function addMarkerToGroup(group, coordinate, html) {
  var marker = new H.map.Marker(coordinate,{ icon: pngIcon });
  // add custom data to the marker
  marker.setData(html);
  group.addObject(marker);
}

var yourMarker  =  '<PATH_OF_IMG/IMG_NAME>';
var pngIcon = new H.map.Icon(yourMarker, {size: {w: 56, h: 56}});