Fatal编程技术网
  • javascript/
  • Javascript 首先，在Bing地图上放置图钉效果很好，然后我再也不能放置图钉了，我的鼠标停止工作。但我看不出有什么不对？

Javascript 首先，在Bing地图上放置图钉效果很好，然后我再也不能放置图钉了，我的鼠标停止工作。但我看不出有什么不对？

javascript maps

Javascript 首先，在Bing地图上放置图钉效果很好，然后我再也不能放置图钉了，我的鼠标停止工作。但我看不出有什么不对？,javascript,maps,bing,pushpin,Javascript,Maps,Bing,Pushpin,我正在尝试制作一个程序，我可以用鼠标在bing地图上放置图钉。 但是当运行程序时，我只能放置第一个，然后我的鼠标停止工作。我找不到任何错误，因此我希望得到一些建议 好的，上面说我要补充更多细节。但问题似乎很容易理解：我做了一些应该合法的事情，这在微软自己的演示中得到了证明，但当我尝试它时，它仍然不起作用。这是一件如此简单、基本的事情，所以我觉得一定有一些基本的东西我就是不懂。 我正在一台全新的电脑上运行它，一台惠普。我计划今天晚些时候在另一台电脑上运行它。这似乎是我在地图上不理解的东西，但这实际

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

好的，上面说我要补充更多细节。但问题似乎很容易理解：我做了一些应该合法的事情，这在微软自己的演示中得到了证明，但当我尝试它时，它仍然不起作用。这是一件如此简单、基本的事情，所以我觉得一定有一些基本的东西我就是不懂。 我正在一台全新的电脑上运行它，一台惠普。我计划今天晚些时候在另一台电脑上运行它。这似乎是我在地图上不理解的东西，但这实际上是从Bings主页上取的一些演示，它们似乎很有效。而且，它在Chrome、Firefox和edge上的工作方式似乎也是一样的

谢谢

波尔克


html，正文{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
溢出：隐藏；
字体系列：“Segoe UI”、Helvetica、Arial、无衬线字体；
位置：相对位置；
}
#用户菜单{
宽度：20%；
身高：40%；
顶部：50px；
左：50px；
位置：绝对位置；
背景色：青色；
颜色：黑色；
可见性：隐藏；
填充物：5px；
边框：1px纯蓝色；
边界半径：10px；
}    
放置图钉
纬度、经度

var-gLoc；
功能用户菜单（l）{
gLoc=l；
var o=document.getElementById（'UserMenu'）.style；
如果（o.visibility==“visible”）
o、 可见性=“隐藏”
否则{
o、 可见性=“可见”；
var e=document.getElementById（“LatLong”）；
e、 innerHTML=“纬度：”+l.Latitude+“经度：”+l.Latitude；
}
}//用户菜单（）
函数CreateNewPushPin（）{
var map=new Microsoft.Maps.map（document.getElementById（'myMap'），{}）；
var pushpin=new Microsoft.Maps.pushpin（gLoc，null）；
地图。实体。推（图钉）；
//似乎我可以放置任意数量的图钉。工作正常，但当此功能结束时，鼠标仍然停止工作。。。
var pushpin=new Microsoft.Maps.pushpin（new Microsoft.Maps.Location（gLoc.latitude，gLoc.longitude-0.1），{color:'#0f0'}）；
地图。实体。推（图钉）；
var pushpin=new Microsoft.Maps.pushpin（new Microsoft.Maps.Location（gLoc.latitude，gLoc.longitude+0.1），{color:'#0f0'}）；
地图。实体。推（图钉）；
document.getElementById（'UserMenu'）.style.visibility=“hidden”；
}//CreateNewPushPin（）
函数句柄（id，e）{
如果（id='mapRightclick'）
用户菜单（如位置）；
}
函数loadMapScenario（）{
var map=new Microsoft.Maps.map（document.getElementById（'myMap'），{}）；
Microsoft.Maps.Events.addHandler（映射，'rightclick'，函数（e）{handleArgs（'mapRightclick'，e）；}）；
}
好的，多亏了微软的瑞奇·布伦德里特，我找到了解决方案。我不应该多次分配同一张地图。如果我分配一次，就没有问题了。 就这样

<!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>