javascript - Bing map V8 GeoJson pin 上的点击事件

Question

我有一个页面正在调用返回 GeoJson 的服务。
类似下面的代码:

var usgsEarthquakeUrl = 'http://earthquake.usgs.gov/fdsnws/event/1/query?minmagnitude=3&format=geojson';

Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
    Microsoft.Maps.GeoJson.readFromUrl(usgsEarthquakeUrl,
        function (shapes) {
            //Add the shape(s) to the map.
            map.entities.push(shapes);
            }, 'callback');
        });

我希望能够添加“单击”或“鼠标悬停”事件处理程序，以便我可以添加一个显示有关引脚的一些信息的信息框。

Answer 1

有两种方法可以解决此问题:

• 循环遍历 readFromUrl 函数返回的每个形状并向其中添加所需的事件。
• 创建一个用于加载数据的图层并将事件添加到该图层。如果您想要做的不仅仅是在 map 上显示单个数据集，这会更加高效，并使数据管理过程变得更加容易。

以下是向每个单独的形状添加事件的方法:

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key',
    zoom: 4
});

var infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
infobox.setMap(map);

var usgsEarthquakeUrl = 'https://earthquake.usgs.gov/fdsnws/event/1/query?minmagnitude=3&format=geojson';

Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
    Microsoft.Maps.GeoJson.readFromUrl(usgsEarthquakeUrl, function (shapes) {
        //Add click event to each shape.
        for(var i = 0, len=shapes.length; i < len; i++){
            Microsoft.Maps.Events.addHandler(shapes[i], 'click', showInfobox);
        }

        //Add shapes to the map.
        map.entities.push(shapes);
    }, 'callback');
});

function showInfobox(e){
    var shape = e.target;
    var loc = e.location; //Default to the location of the mouse event to show the infobox.

    //If the shape is a pushpin, use it's location to display the infobox.
    if(shape instanceof Microsoft.Maps.Pushpin){
        loc = shape.getLocation();
    }

    //Display the infoboc
    infobox.setOptions({location: loc, title: shape.metadata.title, visible: true });
}

以下是使用图层执行此操作的方法(推荐):

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key',
    zoom: 4
});

var infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
infobox.setMap(map);

var dataLayer = new Microsoft.Maps.Layer();
map.layers.insert(dataLayer);

//Add click event to the layer.
Microsoft.Maps.Events.addHandler(dataLayer, 'click', showInfobox);

var usgsEarthquakeUrl = 'https://earthquake.usgs.gov/fdsnws/event/1/query?minmagnitude=3&format=geojson';

Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
    Microsoft.Maps.GeoJson.readFromUrl(usgsEarthquakeUrl, function (shapes) {      
        //Add shapes to the layer.
        dataLayer.add(shapes);
    }, 'callback');
});

function showInfobox(e){
    var shape = e.target;
    var loc = e.location; //Default to the location of the mouse event to show the infobox.

    //If the shape is a pushpin, use it's location to display the infobox.
    if(shape instanceof Microsoft.Maps.Pushpin){
        loc = shape.getLocation();
    }

    //Display the infoboc
    infobox.setOptions({location: loc, title: shape.metadata.title, visible: true });
}

这是一个live sample .