Bing 地图 API - 图钉位置错误？

Question

为什么我的图钉位置总是出现在我实际点击的位置的右下方？

我的上下文菜单出现在正确的位置，但 tryPixelToLocation 给了我一个向下和向右的点，指向我实际点击的位置。不知道为什么。

请指教。谢谢。

对于项目要求我无法使用window.Microsoft.Maps.addHandler。我必须通过上下文菜单执行我的操作

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); // State to hold the map object

    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); // Set the map object in state

            return () => {
                mapRef.current.removeEventListener('contextmenu', handleContextMenu);
            };
        };

        return () => {
            if (script.parentNode) {
                script.parentNode.removeChild(script);
            }
        };
    }, [bingMapsKey]);

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

        setMenuPosition({
            x: (event.clientX - mapContainer.left) + 'px',
            y: (event.clientY - mapContainer.top) + 'px'
        });
    };
    
    const handleMenuClick = (action, x, y) => {
        if (!map) return;


        switch (action) {
            case 'add':
                //Convert pixel coordinates to map location
                const clickLocation = map.tryPixelToLocation(new window.Microsoft.Maps.Point(
                    parseInt(x ),
                    parseInt(y)
                ));
    
                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', menuPosition.x, menuPosition.y)}>Add Pin</button>
                    <button onClick={() => handleMenuClick('edit', menuPosition.x, menuPosition.y)}>Edit Pin</button>
                    <button onClick={() => handleMenuClick('remove', menuPosition.x, menuPosition.y)}>Remove Pin</button>
                </div>
            )}
        </div>
    );
};

export default BingMap;

Answer 1

查看您的代码，我怀疑问题在于，当您使用

map.tryPixelToLocation

时，您没有指定

PixelReference

类型，因此它默认为

viewport

，它相对于地图中心定位像素。查看您的代码，您似乎正在计算相对于地图 div 元素左上角的像素位置，因此您希望像素引用为

control

。例如：

const clickLocation = map.tryPixelToLocation(new window.Microsoft.Maps.Point(
    parseInt(x),
    parseInt(y)
), Microsoft.Maps.PixelReference.control);

也就是说，由于您的初始输入是相对于页面左上角的鼠标坐标，因此您可以跳过计算地图控件相对位置的计算并将像素参考设置为

page

。例如：

const clickLocation = map.tryPixelToLocation(new window.Microsoft.Maps.Point(
    menuPosition.x, 
    menuPosition.y
), Microsoft.Maps.PixelReference.page);

以下是一些相关文档：

• https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/map-class
• https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/pixelreference-enumeration