这里的地图在 ms access webbrowser 中不可拖动

Question

我使用此处地图中的可拖动标记示例创建了一个简单的 html。 我通过添加对旧版 js、元标记的引用以及在地图选项中使用 P2D 引擎，对其进行了调整以支持 IE 11。 还为坐标添加了两个 url 参数。 它在 IE11 中完美运行，它在 ms-access webbrowser 中加载并显示平移和缩放按钮，但它保持静态，不可拖动，但平移和缩放有效。

奇怪的是，如果我在同一个浏览器控件中导航到 wego.here.com ，那么地图是可拖动的。 所以他们正在这里的地图主页上做一些我没有在我的脚本中做的事情。

我还尝试在 access 中使用 Activex 控件列表中的 Microsoft Web 浏览器。

我需要它是可拖动的，以便在用户更改标记位置后我可以选择坐标。

这是我的脚本：

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>Draggable Marker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<style>
html, body { margin:0px; padding:0px; width: 100%; height: 100%; }
.main { height: 100%; }
</style>
</head> 

<body id="markers-on-the-map">

<div class="main" style="width:100%"  id="map"></div>
<input type="hidden" id="long" name="long">
<input type="hidden" id="lat" name="lat">

<script>

function addDraggableMarker(map, behavior){

var marker = new H.map.Marker({lat:latitud, lng:longitud}, {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) {

     $('#long').val(ev.target.b.lng);
     $('#lat').val(ev.target.b.lat);

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

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
      apikey: '?????????????????????????????????'
});
var defaultLayers = platform.createDefaultLayers();

//url parameters
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");


  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = decodeURIComponent(pair[1]);
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
      query_string[pair[0]] = arr;
    } else {
      query_string[pair[0]].push(decodeURIComponent(pair[1]));
    }
  }

var latitud=query_string.lat;
var longitud=query_string.long;

//Step 2: initialize a map - this map is centered over Boston
var map = new H.Map(document.getElementById('map'),
  defaultLayers.raster.normal.map, {
  center: {lat:latitud, lng:longitud},
  engineType: H.map.render.RenderEngine.EngineType.P2D,
  zoom: 12,
  pixelRatio: window.devicePixelRatio || 1
});

// add a resize listener to make sure that the map occupies the whole container
//window.addEventListener('resize', () => map.getViewPort().resize());
window.addEventListener('resize', function () {map.getViewPort().resize(); });

//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));
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 4: Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');

// Add the click event listener.
addDraggableMarker(map, behavior);

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

Answer 1

请在此静态页面上检查：您的代码适用于我的 IE11

这里的地图在 ms access webbrowser 中不可拖动

问题描述

1 个解决方案

解决方案1
0 2020-01-20 09:39:53

这里的地图在 ms access webbrowser 中不可拖动

问题描述

1 个解决方案

解决方案1 0 2020-01-20 09:39:53

解决方案1
0 2020-01-20 09:39:53