时间戳

首页 > 解决方案 > 这里映射 api：行为在 Microsoft Web 浏览器 ActiveX 中没有反应

javascript - 这里映射 api：行为在 Microsoft Web 浏览器 ActiveX 中没有反应

问题描述

我在 Here maps about draggable Marker 中尝试了示例： Draggable Marker | 这里

第一次尝试地图没有显示在 AX2009 Microsoft Web Browser ActiveX 中。我切换vector到raster并添加engineType: H.map.render.RenderEngine.EngineType.P2了默认网络浏览器中的标记，如 IE11、Chrome、edge 工作正常，我可以拖动标记。但是在 AX2009 上的 ActiveX 中，标记没有拖动，但我可以像在默认网络浏览器中一样看到地图 istelf。有什么想法我应该添加到代码中吗？任何帮助表示赞赏。

 <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"
    />
    <title>Simple Map</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    
    <div id="map"></div>
    <script>
var point = {lat:56.983849, lng:24.237360};
var apikey = "xxx",
        platform = new H.service.Platform({
          apikey: apikey,
        }),
        pixelRatio = window.devicePixelRatio || 1,
        ppi,
        defaultLayers,
        mapElement = document.getElementById("map"),
        tileSize,
        map,
        behavior,
        ui;
      if (pixelRatio > 1) {
        ppi = 250;
      }
      defaultLayers = platform.createDefaultLayers({
        ppi: ppi,
      });
      map = new H.Map(mapElement, defaultLayers.raster.normal.map, {
        zoom: 14,
        center: point,
        renderBaseBackground: { lower: 2, higher: 2 },
        pixelRatio: pixelRatio,
        engineType: H.map.render.RenderEngine.EngineType.P2D,
      });
      window.addEventListener("resize", function () {
        map.getViewPort().resize();
      });

      function addDraggableMarker(map, behavior){

var marker = new H.map.Marker(point, {
  // mark the object as volatile for the smooth dragging
  volatility: true
});
// Ensure that the marker can receive drag events
marker.draggable = true;
map.addObject(marker);

// disable the default draggability of the underlying map
// and calculate the offset between mouse and target's position
// when starting to drag a marker object:
map.addEventListener('dragstart', function(ev) {
  var target = ev.target,
      pointer = ev.currentPointer;
  if (target instanceof H.map.Marker) {
    var targetPosition = map.geoToScreen(target.getGeometry());
    target['offset'] = new H.math.Point(pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
    behavior.disable();
  }
}, false);


// re-enable the default draggability of the underlying map
// when dragging has completed
map.addEventListener('dragend', function(ev) {
  var target = ev.target;
  if (target instanceof H.map.Marker) {
    behavior.enable();
  }
}, false);

// Listen to the drag event and move the position of the marker
// as necessary
 map.addEventListener('drag', function(ev) {
  var target = ev.target,
      pointer = ev.currentPointer;
  if (target instanceof H.map.Marker) {
    target.setGeometry(map.screenToGeo(pointer.viewportX - target['offset'].x, pointer.viewportY - target['offset'].y));
  }
}, false);
      }

      behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      ui = H.ui.UI.createDefault(map, defaultLayers);


      addDraggableMarker(map, behavior);

</script>
  </body>
</html>

标签： javascripthere-apimarkersdynamics-ax-2009heremaps

解决方案

推荐阅读