0

我创建了一个应用程序，我在其中使用了几个自定义 HTML 图钉。这些图钉中的每一个都有一个单击事件，该事件将在地图上调用 setView 以使地图在所选图钉上居中。这在除 Firefox（测试版本 22.0）之外的所有浏览器中都能完美运行。

在 Firefox 中，在 setView 动画完成并且地图以图钉为中心后，图钉会水平、垂直或同时偏移一定数量的像素。该数量似乎与地图移动的像素数量相对应。如果您随后使用鼠标手动拖动地图，则在释放鼠标按钮时，图钉会弹回其正确位置。我已经检查了 MapPushpinBase 锚标记的顶部和左侧位置值，并将其与其他浏览器进行比较，并且值不同。

不幸的是，我无法发布实时示例，因为该产品尚未公开发布。但请参阅下文了解我正在使用的代码。

this.clickHandlers.push(Microsoft.Maps.Events.addHandler(node, 'click', function (e) {
    var element = $(e.target._htmlContent);
    self.nodeHitboxHandler(element);
}));

在 nodeHitboxHandler 函数中，唯一的 Bing Map 代码如下：

this.map.setView({
    center: new Microsoft.Maps.Location(panStart.latitude, panStart.longitude),
    zoom: this.zoom,
    mapTypeId: Microsoft.Maps.MapTypeId[self.mapTypeId]
});

提前感谢您的帮助。

更新：

为了使事情更清楚，我创建了一个简单的示例来演示该问题。你可以在这里看到它：http: //ginof.com/tests/bing/

在 Firefox 中，尝试单击不同的图钉，并在地图完成平移到其新位置后观察您刚刚单击的图钉的行为。该地图在除 Firefox 之外的所有浏览器中都能正常工作。

以下是此示例的完整 JavaScript 代码：

$(document).ready(function () {
    var map = null,
        initialCoordinates = {latitude: 40.71435, longitude: -74.00597},
        initialPoint = new Microsoft.Maps.Location(initialCoordinates.latitude, initialCoordinates.longitude),
        range = {
            top: 3,
            right: 5,
            bottom: 0.01,
            left: 5
        },
        mapOptions = {
            credentials:"BING-MAPS-API-KEY",
            disableKeyboardInput: true,
            disableZooming: true,
            enableClickableLogo: false,
            enableSearchLogo: false,
            showBreadcrumb: false,
            showDashboard: false,
            showMapTypeSelector: false,
            showScalebar: false,
            inertiaIntensity: 0.5,
            mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
            labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
            center: initialPoint,
            zoom: 14
        };

    function GetMap() {
        // Initialize the map
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);

        // Create nodes
        map.entities.clear();
        var pushpinOptions,
            pushpin,
            nodeCoordinates;

        for (var i = 0; i < 5; i++) {
            pushpinOptions = {width: null, height: null, htmlContent: '<div id="node' + i + '" class="node">' + i + '. Custom HTML</div>'}; 
            nodeCoordinates = {latitude: initialCoordinates.latitude + i * 0.005, longitude: initialCoordinates.longitude + i * 0.005};
            pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(nodeCoordinates.latitude, nodeCoordinates.longitude), pushpinOptions);
            pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click',
                (function () {
                    var nodeId = i,
                        homeCoordinates = nodeCoordinates;
                    return function () {
                        console.log("node " + nodeId + " clicked.");
                        map.setView({center: new Microsoft.Maps.Location(homeCoordinates.latitude, homeCoordinates.longitude)});
                    }
                })()
            );
            map.entities.push(pushpin);
        }
    }

    GetMap();
});

再次感谢任何帮助。

4

1 回答 1

0

这是一个我能够重现的已知问题，并已上报给开发团队。请注意，必应地图论坛是报告此类问题的最佳场所。您可以在此处找到关于此主题的类似主题：http: //social.msdn.microsoft.com/Forums/en-US/f77e6a80-2e0f-44c3-81cc-edb4c2327016/custom-html-pushpins-in-firefox-not -定位正确

于 2013-07-31T13:41:59.730 回答