更新：

Question

我创建了一个应用程序，我使用了几个自定义HTML图钉。这些图钉中的每一个都有一个click事件，它将在地图上调用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();
});

再次感谢您的帮助。

Answer 1

这是一个已知的问题，我能够重现一个已经升级到开发团队的问题。请注意，Bing Maps论坛是报告这些类型问题的最佳位置。您可以在此处找到关于此主题的类似主题：http://social.msdn.microsoft.com/Forums/en-US/f77e6a80-2e0f-44c3-81cc-edb4c2327016/custom-html-pushpins-in-firefox-not-positioned-correctly

Bing Maps API v7 Firefox中的自定义HTML图钉位置不正确

更新：

1 个答案: