时间戳

首页 > 解决方案 > 这里的地图在 ms 访问 webbrowser 中不可拖动

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

问题描述

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

奇怪的是，如果我在同一个浏览器控件中导航到 wego.here.com，那么地图是可拖动的。因此，他们在此处地图主页中执行了我在脚本中没有执行的其他操作。

我还尝试使用访问中的 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>```

标签： ms-accesshere-api

解决方案

请在此静态页面上检查 ：您的代码适用于我的 IE11 在此处输入图像描述

推荐阅读