Bing Maps V8 GeoJson 点击 pin 事件

Question

我有一个页面正在调用 returns 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');
        });

我希望能够添加一个 "click" 或 "mouseover" 事件处理程序，以便我可以添加一个信息框来显示有关 pin 的一些信息。

Answer 1

您可以通过两种方式解决此问题：

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

以下是向每个形状添加事件的方法：

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.

Bing Maps V8 GeoJson 点击 pin 事件

Bing Maps V8 GeoJson click event on pin

javascript

bing-maps

Bing Maps V8 GeoJson 点击​​ pin 事件

Bing Maps V8 GeoJson click event on pin

javascript

bing-maps

Bing Maps V8 GeoJson 点击 pin 事件