如何从HERE地图中删除现有的标记和信息气泡

时间:2018-08-08 13:39:13

标签: javascript maps here-api

我正在为地图使用HERE Maps API。每当单击地图时,我都可以添加标记和信息气泡。但是,我只希望地图上有最新的标记和信息气泡,并删除了所有其他标记和信息。下面是我的代码,其中包含我多次单击地图后的所有标记和信息气泡。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>
 <div id="map" style="height:550px;width:720px;"></div>

<script>
    //Step 1: initialize communication with the platform
    var platform = new H.service.Platform({
  app_id: 'devportal-demo-20180625',
  app_code: '9v2BkviRwi9Ot26kp2IysQ',
      useHTTPS: true
    });
    var pixelRatio = window.devicePixelRatio || 1;
    var defaultLayers = platform.createDefaultLayers({
      tileSize: pixelRatio === 1 ? 256 : 512,
      ppi: pixelRatio === 1 ? undefined : 320
    });

    //Step 2: initialize a map  - not specificing a location will give a whole world view.
    var map = new H.Map(document.getElementById('map'),
      defaultLayers.normal.map, {pixelRatio: pixelRatio});

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




function setUpClickListener(map) {
  map.addEventListener('tap', function (evt) {
    var coord = map.screenToGeo(evt.currentPointer.viewportX,
            evt.currentPointer.viewportY);
     addMarker(coord);
  });
}

function addMarker(coordinates){
    var marker = new H.map.Marker({lat:coordinates.lat, lng: coordinates.lng});
    map.addObject(marker);

    var bubble =  new H.ui.InfoBubble({lat:coordinates.lat, lng: coordinates.lng}, {
            content: '<b>Hello World!</b>'
           });
    // show info bubble
    ui.addBubble(bubble);
}

setUpClickListener(map);
</script>

</body>
</html>

2 个答案:

答案 0 :(得分:2)

您可以在地图或组上调用removeObject()方法来删除地图对象(例如标记)。

如果要快速从地图中删除所有对象,最简单的方法是将它们添加到组中并将该组添加到地图中。然后,您可以在网上论坛上致电removeAll()

答案 1 :(得分:1)

├─src
│  ├─main
│  │  ├─java
│  │  │  ├─com
│  │  │  │  └─example
│  │  │  │      └─demo
│  │  │  └─hello
│  │  │      │  Application.java
│  │  │      ├─reactive
│  │  │      │  └─api
│  │  │      │          GreetingHandler.java
│  │  │      │          GreetingRouter.java
│  │  │      │`
│  │  │      └─sub
│  │  │          └─api
│  │  │                  GreetingController2.java
│