第一次在 Bing 地图上放置 PushPins 效果很好，然后我无法再放置并且我的鼠标停止工作但我看不出有什么问题？

问题描述

我正在尝试制作一个程序，我可以在其中使用鼠标将图钉放置在 bing 地图上。但是在运行程序时我只能放置第一个，然后我的鼠标停止工作。我找不到任何错误，所以我希望得到一些建议。

好的，它说我要添加更多细节。但问题似乎很容易理解：我做了一些应该合法的事情，并且在微软自己的演示中进行了演示，但当我尝试时仍然不起作用。这是一件如此简单、基本的事情，所以我觉得一定有一些我不明白的基本东西。我在一台相当新的电脑上运行它，一台惠普。我打算今天晚些时候在另一台 PC 上运行它。这似乎是我在地图上不明白的事情，但这实际上是从 Bings 主页上获取的一些演示，它们似乎有效。此外，它似乎在 Chrome、Firefox 和 Edge 上的工作方式相同。

谢谢

波尔克

<!DOCTYPE html>
<html>
    <style>
    html,body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden; 
        font-family:'Segoe UI',Helvetica,Arial,Sans-Serif;
        position: relative;
    }
    #UserMenu {
        width : 20%;
        height : 40%;
        top : 50px;
        left : 50px;
        position: absolute;
        background-color: cyan;
        color: black;
        visibility: hidden; 
        padding: 5px;
        border: 1px solid blue;
        border-radius: 10px;
    }    
</style>
    <body>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=&callback=loadMapScenario' async defer></script>
        <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        
        <div id='UserMenu'>
            <button id="CreateNewpushpin" class="menuknap" onclick="CreateNewpushpin()">Place pushpin</button>
            <p id="LatLong" style="margin-left: 10px;margin-top: 0px;"> Latitude,Longitude </p>
        </div>

        <script type='text/javascript'>
            var gLoc;
            function UserMenu(l) {
                gLoc = l;               
                var o = document.getElementById('UserMenu').style;
                if (o.visibility == "visible")
                    o.visibility = "hidden"
                else  {
                    o.visibility = "visible";
                    var e = document.getElementById("LatLong");
                    e.innerHTML = "Latitude: " + l.latitude + ' Longitude: ' + l.longitude;
                }
            } // UserMenu()
            
            function CreateNewpushpin() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'),{});
                var pushpin = new Microsoft.Maps.pushpin(gLoc,null);
                map.entities.push(pushpin);
                
                // Seems I can place as many pushpins as I'd like. Works fine,but the mouse still stops working when this function ends...
                var pushpin = new Microsoft.Maps.pushpin(new Microsoft.Maps.Location(gLoc.latitude,gLoc.longitude - 0.1),{ color: '#0f0'});
                map.entities.push(pushpin);
                
                var pushpin = new Microsoft.Maps.pushpin(new Microsoft.Maps.Location(gLoc.latitude,gLoc.longitude + 0.1),{ color: '#0f0'});
                map.entities.push(pushpin);
                
                document.getElementById('UserMenu').style.visibility = "hidden";
            } // CreateNewpushpin()
                
            function handleArgs(id,e) {
                if (id == 'mapRightclick') 
                    UserMenu(e.location);
            }

            function loadMapScenario() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'),{});
                Microsoft.Maps.Events.addHandler(map,'rightclick',function (e) { handleArgs('mapRightclick',e); });
            }
        </script>
    </body>
</html>

解决方法

好的，我得到了解决方案，感谢微软的 Ricky Brundritt。我不应该多次分配同一个地图。如果我分配一次，就没有问题。就是这样。

bing javascript pushpin