Question

我正在尝试使用Bing地图生成一个地图应用程序，其中的按钮将检索JSON字符串并根据地图中心在地图上放置图钉。

这样做很好，但是我遇到了两个我无法诊断的问题。

首先，当我放置引脚后移动地图时，除了1-3之外，大部分都会从地图中消失。我已经发现引脚仍然保存在map.entities中，但并不是全部显示。

第二个问题是我在引脚上有一个点击事件，有时当我点击一个引脚时它会消失（有时会重新出现在地图上的其他地方）。

这是我的代码：

function addPin() {
    map.entities.clear();    
    var pinImg = "images/MapPin.jpg";    
    var latLong = {};
    var name;   

    for (var i = 0; i < factualJson.response.data.length; ++i) {

        latLong['latitude'] = factualJson.response.data[i].latitude;
        latLong['longitude'] = factualJson.response.data[i].longitude;
        name = factualJson.response.data[i].name;

        var pin = new Microsoft.Maps.Pushpin(latLong, {
            icon: pinImg,
            anchor: new Microsoft.Maps.Point(latLong['latitude'], latLong['longitude']),
            draggable: true,
            width: 48,
            height: 48
        });

        Microsoft.Maps.Events.addHandler(pin, 'click', displayName);
        pin.title = name;
        pin.id = 'pin' + i;
        map.entities.push(pin);             
    }

    document.getElementById("arrayLength").innerHTML = "Number of locations: " +            map.entities.getLength();     
}

function displayName(e) {

    document.getElementById("name").innerHTML = "";

    if (this.target.id  != -1) {        
        document.getElementById("name").innerHTML = this.target.title;
    }
}

function boot() {
    Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', { callback: getMap });    
}

function getMap() {    
    map = new Microsoft.Maps.Map($gel("bingMap"), {
        credentials: getKey(),
        customizeOverlays: true,
        enableClickableLogo: true,
        enableSearchLogo: true,
        showDashboard: true,
        showBreadcrumb: true,
        showCopyright: true,
        zoom: 10,
        labelOverlay: Microsoft.Maps.LabelOverlay.hidden
    });        

    setGeoLocation();
    //setTimeout(optimizeMap, 100);

    window.onresize = resizeWin;
    resizeWin();
}

目前我从按钮调用ajax，回调函数调用'AddPin'，它将引脚添加到地图中。我以为我会添加地图初始化代码以防它相关。目前在body load上调用boot（）。

Answer 1

对我来说，解决方案类似于你的 @canadian coder

Microsoft.Maps.Location()只接受浮点值，没有字符串和Int。

我使用MVC架构并使用模型传递字符串。后来我将该字符串转换为float并传递给Location。问题解决了。

var pushpin = new Microsoft.Maps.Pushpin(
center, { icon: '/Content/BingPushpin.png', width: 50, height: 50, draggable: false });
pushpin.setLocation(new Microsoft.Maps.Location
(parseFloat(@Model.Latitude) , parseFloat(@Model.Longitude))); 
dataLayer.push(pushpin); 
locations.push(new Microsoft.Maps.Location
(parseFloat(@Model.Latitude) , parseFloat(@Model.Longitude)));

编辑：

后来发现问题依然存在。另一个原因可能是您正在调用Map加载两次。因此，请检查正在加载的地图的任何其他实例。在我的情况下见下文。

$(document).ready(function () {
loadSearchModule(); //calling Map to Load at a div without pushpins

//code to do something

getMapOnLocation();
}

function getMapOnLocation()
{//code to display map with pushpin
}

在上面的示例中，我告诉控件使用PushPins加载我的地图，当页面完全加载时加载地图而不使用图钉。希望这会有所帮助：）

Answer 2

一如既往，我需要在自己弄明白之前先问问题。

问题是我需要将Microsoft位置对象推入引脚而不是对象。像这样：

var loc = new Microsoft.Maps.Location(47.592, -122.332);

而不是我的latLong对象。

这似乎也解决了点击事件中针脚消失的问题。

当平移地图时，针脚在地图上消失

2 个答案: