Bing Maps API问题：Pushpin定位与实际点击位置不符

问题概述 #

在使用Bing Maps API时，右键菜单能正常显示在点击位置，但调用tryPixelToLocation转换得到的坐标始终偏向右下方，导致Pushpin定位错误。项目要求不能使用window.Microsoft.Maps.addHandler，必须通过右键菜单完成操作。

问题原因 #

当前代码在右键点击时仅保存相对于地图容器的像素坐标，待点击菜单按钮时才执行坐标转换。这个过程中，若地图视图发生变化（如平移、缩放），或像素坐标计算未适配地图控件的内部渲染逻辑，都会导致转换结果出现偏移。

解决方案 #

在右键点击事件触发时直接完成像素到地理坐标的转换，将结果保存到状态中，后续添加Pushpin时直接使用该坐标，避免二次转换带来的误差。具体修改如下：

修改后的完整代码 #

import React, { useState, useEffect, useRef } from 'react';

const BingMap = ({ bingMapsKey }) => {
    const mapRef = useRef(null);
    const [menuPosition, setMenuPosition] = useState({ x: '0px', y: '0px' });
    const [showMenu, setShowMenu] = useState(false);
    const [map, setMap] = useState(null);
    // 新增状态保存右键点击的地理坐标
    const [clickLocation, setClickLocation] = useState(null); 

    useEffect(() => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.defer = true;
        script.src = `https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario&key=${bingMapsKey}`;
        document.body.appendChild(script);

        window.loadMapScenario = () => {
            const newMap = new window.Microsoft.Maps.Map(mapRef.current, {
                center: new window.Microsoft.Maps.Location(47.6062, -122.3321),
                zoom: 10
            });

            mapRef.current.addEventListener('contextmenu', handleContextMenu);
            setMap(newMap);
        };

        return () => {
            if (script.parentNode) {
                script.parentNode.removeChild(script);
            }
            // 组件卸载时移除事件监听
            if (mapRef.current) {
                mapRef.current.removeEventListener('contextmenu', handleContextMenu);
            }
        };
    }, [bingMapsKey]);

    const handleContextMenu = (event) => {
        event.preventDefault();
        const mapContainer = mapRef.current.getBoundingClientRect(); 
        setShowMenu(true);

        // 计算相对于地图容器的像素坐标
        const pixelX = event.clientX - mapContainer.left;
        const pixelY = event.clientY - mapContainer.top;

        setMenuPosition({
            x: `${pixelX}px`,
            y: `${pixelY}px`
        });

        // 直接转换为地理坐标并保存
        if (map) {
            const location = map.tryPixelToLocation(new window.Microsoft.Maps.Point(pixelX, pixelY));
            setClickLocation(location);
        }
    };
    
    const handleMenuClick = (action) => {
        if (!map || !clickLocation) return;

        switch (action) {
            case 'add':
                let pinTitle = prompt("Enter a title for the pin:", "New Location");
                let pinDescription = prompt("Enter a description for the pin:", "");

                if (pinTitle !== null) {
                    const pin = new window.Microsoft.Maps.Pushpin(clickLocation, {
                        title: pinTitle,
                        subTitle: pinDescription
                    });

                    pin.metadata = {
                        title: pinTitle,
                        description: pinDescription
                    };

                    map.entities.push(pin);
                }
                break;

            case 'edit':
                console.log('EDIT');
                // Handle edit pin action
                break;
            case 'remove':
                console.log('REMOVE');
                // Handle remove pin action
                break;
            default:
                break;
        }
        setShowMenu(false);
    };
    

    return (
        <div style={{ position: 'relative' }}>
            <div ref={mapRef} style={{ width: '100vw', height: '100vh' }}></div>
            {showMenu && (
                <div
                    style={{
                        position: 'absolute',
                        left: menuPosition.x,
                        top: menuPosition.y,
                        background: 'white',
                        border: '1px solid black',
                        padding: '5px',
                        zIndex: 1000
                    }}
                >
                    <button onClick={() => handleMenuClick('add')}>Add Pin</button>
                    <button onClick={() => handleMenuClick('edit')}>Edit Pin</button>
                    <button onClick={() => handleMenuClick('remove')}>Remove Pin</button>
                </div>
            )}
        </div>
    );
};

export default BingMap;

关键修改点说明 #

1. 新增clickLocation状态，用于存储右键点击时直接转换好的地理坐标
2. 在handleContextMenu中完成像素到地理坐标的转换并保存，避免菜单点击时的二次转换
3. 修复原代码中事件监听清理函数无效的问题，将其移至useEffect返回值中
4. 简化handleMenuClick的参数传递，无需再传递像素坐标

内容的提问来源于stack exchange，提问作者Derkel