Chrome和Firefox下的标记拖拽不起作用 [英] Marker drag not working in iframe under Chrome and Firefox

问题描述

我正在将Google地图嵌入到包含多个iframe的页面中。可能会发生，我同时加载2个地图到2个不同的内联框架。这就是Map API在主文档头部加载一次的原因：

 < script src =https ：//maps.googleapis.com/maps/api/js？key = AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM& v = 3& sensor = falsetype =text / javascript>< / script> 
  

为了在iframe中加载地图，我编写了下面的代码，它在iframe中运行： / p>

  var googleAPI = window.top.google; 
 var latLong = new googleAPI.maps.LatLng（31.7655374094844,93.515625）; 
 var map = new googleAPI.maps.Map（document.getElementById（map-container），{
 zoom：8，
 center：latLong，
 mapTypeId：googleAPI。 maps.MapTypeId.ROADMAP 
}）; 
  

地图在页面上正确显示，没有任何错误。我还在地图上添加了一个标记，我想让用户通过拖放操作来更改标记的位置。
$ b $ pre $ code var simpleMarker = new googleAPI.maps.Marker（{
位置：latLong，
map：map，
draggable：true，
动画：googleAPI.maps.Animation.DROP，
title：'Marker'
}）;在IE浏览器中，拖放操作没有任何问题，在Chrome浏览器和Firefox浏览器中拖动不起作用如预期的那样：有时候阻力会停止，或者你甚至会得到无尽的阻力。
我的猜测是，这是由于API被加载到主文档中，并在iframes内引用之后引起的。我不想改变这一点，主要是因为像我之前提到的，我可以在页面上有几个地图。

有没有修正拖放问题？

我很感激任何帮助，您可以给我，
谢谢

解决方案

我没有解决方案，恐怕这种API

看一下API的开始（ https://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/16/10/main。 js ）

 （function（）{'use strict'; var k = window / * ..更多代码.. * /}）调用（这）; 
  

该函数将在iframe的父文档中调用，变量 k （它将被API内部用作对窗口对象的引用）将总是引用iframe的父窗口，当观察事件时会导致不正确的值一个标记）在iframe。

I'm working on embedding the google map, into a page, containing multiple iframes. It can happen, that I load 2 maps, into 2 different iframes at the same time. This is the reason why the Map API loaded only once, in the main document's head section:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&v=3&sensor=false" type="text/javascript"></script>

For loading the map inside the iframe, I wrote the following code, which runs inside the iframe:

var googleAPI = window.top.google;
var latLong = new googleAPI.maps.LatLng(31.7655374094844,93.515625);
var map = new googleAPI.maps.Map(document.getElementById("map-container"), {
            zoom: 8,
            center: latLong,
            mapTypeId: googleAPI.maps.MapTypeId.ROADMAP
        });

The map appears correctly on the page, without any errors. I also add a marker on the map and I want to allow the users to change the marker's position, by drag&drop

var simpleMarker = new googleAPI.maps.Marker({
        position: latLong,
        map: map,
        draggable: true,
        animation: googleAPI.maps.Animation.DROP, 
        title: 'Marker'
    });

While under IE the marker's drag&drop without any problems, under Chrome&Firefox the drag it's not working as expected: sometimes the drag stops or you even get an endless drag. My guess is that this is caused because the API was loaded in the main document, and after referenced from inside the iframes. I do not wish to change this, mostly because like I previously mentioned, I can have several maps on the page.

Is there a fix for the drag&drop issue?

I would appreciate any help you could give me, Thanks

解决方案

I don't have a solution, I'm afraid this kind of API-usage is not intended.

Take a look at the start of the API (https://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/16/10/main.js)

(function(){'use strict';var k=window/*..more code..*/}).call(this);

This function will be called in the parent document of the iframe, the variable k(which will be used internally by the API as reference to the window-object) will always refer to the parent window of the iframe what will result in incorrect values when observing events (e.g. mousemove when you drag a marker) in the iframe.

这篇关于Chrome和Firefox下的标记拖拽不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！