Question

我正在将谷歌地图嵌入到包含多个iframe的页面中。我可以同时将2张地图加载到2个不同的iframe中。这就是为什么Map API只在主文档的头部中加载一次的原因：

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

为了在iframe中加载地图，我编写了以下代码，它在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
        });

地图在页面上正确显示，没有任何错误。我还在地图上添加了一个标记，我希望允许用户通过拖放来更改标记的位置

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

虽然在IE下标记的拖放没有任何问题，但在Chrome＆amp; Firefox下拖动它并没有按预期工作：有时拖动停止或者你甚至会受到无休止的阻力。我的猜测是，这是因为API被加载到主文档中，并在从iframe内部引用之后。我不想改变这一点，主要是因为像我之前提到的那样，我可以在页面上有几张地图。

是否有针对拖放问题的解决方法？

我很感激你能给我的任何帮助，感谢

Answer 1

我没有解决方案，我担心不会使用此类API。

看一下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);

此函数将在iframe的父文档中调用，变量k（将在API内部用作窗口对象的引用）将始终引用iframe的父窗口在iframe中观察事件时（例如，在拖动标记时鼠标移动）会导致错误值的原因。

标记拖动在Chrome和Firefox下无法在iframe中运行

1 个答案: