当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Bing Maps - Invoke Click Event on PushPin

问题描述:

I have the following bing map: https://www.bob-elliot.co.uk/locateV2.php

When a shop is selected in the left-hand list the map auto centers on that pushpin, what i need to do now is invoke the click() handle of that pin (or show the relevant InfoBox).

Problem is, i'm pushing the pins into a Microsoft.Maps.EntityCollection(); called dataLayer so i cant call map.entities.get() directly - or rather - if i try calling it this way get() does not return anything.

Note the zoomMap() function at the bottom of this snippet, i have commented out the lines in question.

How can i invoke the click event?

var map = null;

var dataLayer = null;

var infoboxLayer = null;

function loadMap() {

//#### Prep default location

var defaultLocation = new Microsoft.Maps.Location(53.6880, -2.6646);

//#### Prep Map Options

var mapOptions = {

credentials: 'KEY_REMOVED',

center: defaultLocation,

mapTypeId: Microsoft.Maps.MapTypeId.road,

zoom: 7,

enableClickableLogo: false,

enableSearchLogo: false

}

//#### Initialise the primary map control

map = new Microsoft.Maps.Map(document.getElementById('BobElliotMap'), mapOptions);

//#### Add data layer

dataLayer = new Microsoft.Maps.EntityCollection();

map.entities.push(dataLayer);

//#### Add infobox layer

infoboxLayer = new Microsoft.Maps.EntityCollection();

map.entities.push(infoboxLayer);

//#### Prep InfoBox & add to infobox layer

var infoboxOptions = {

width: 300,

height: 200,

visible: false,

offset: new Microsoft.Maps.Point(0, 20)

};

infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions);

infoboxLayer.push(infobox);

//#### Add Data to the map

DrawPins();

}

function displayInfobox(e) {

if (e.targetType == "pushpin") {

infobox.setOptions({

title: e.target.Title,

description: e.target.Description,

visible: true,

offset: new Microsoft.Maps.Point(0, 25)

});

infobox.setLocation(e.target.getLocation());

//#### A buffer limit to use to specify the infobox must be away from the edges of the map.

var buffer = 30;

var infoboxOffset = infobox.getOffset();

var infoboxAnchor = infobox.getAnchor();

var infoboxLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);

var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x;

var dy = infoboxLocation.y - 25 - infoboxAnchor.y;

if (dy < buffer) { //Infobox overlaps with top of map.

//#### Offset in opposite direction.

dy *= -1;

//#### add buffer from the top edge of the map.

dy += buffer;

} else {

//#### If dy is greater than zero than it does not overlap.

dy = 0;

}

if (dx < buffer) { //Check to see if overlapping with left side of map.

//#### Offset in opposite direction.

dx *= -1;

//#### add a buffer from the left edge of the map.

dx += buffer;

} else { //Check to see if overlapping with right side of map.

dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth();

//#### If dx is greater than zero then it does not overlap.

if (dx > buffer) {

dx = 0;

} else {

//#### add a buffer from the right edge of the map.

dx -= buffer;

}

}

//#### Adjust the map so infobox is in view

if (dx != 0 || dy != 0) {

map.setView({

centerOffset: new Microsoft.Maps.Point(dx, dy),

center: map.getCenter()

});

}

}

}

function DrawPins() {

var pin0 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.1913, -2.51945));

pin0.Title = "** CYCLONE CYCLES A/C CLOSED";

pin0.Description = "74 WEAVER STREET<br />WINSFORD<br />CHESHIRE<br />CW7 4AA<br /><br /><b>Tel:</b> +44606861992";

Microsoft.Maps.Events.addHandler(pin0, 'click', displayInfobox);

dataLayer.push(pin0);

var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.7485, -0.348162));

pin1.Title = "**2 WHEELS CYCLES LIMITED - HULL";

pin1.Description = "8 SPRING STREET<br />HULL<br />HU2 8RB<br /><br /><b>Tel:</b> +44482216170<br /><b>Fax:</b> +44828515<br /><b>Web:</b> <a href='http://www.2wheelscycles.co.uk' targer='_blank'>www.2wheelscycles.co.uk</a>";

Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);

dataLayer.push(pin1);

}

function zoomMap(PinID, Lat, Long) {

var ZoomLocation = new Microsoft.Maps.Location(Lat, Long);

map.setView({

zoom: 13,

center: ZoomLocation

});

//#### These are the lines that dont work, selectedPin remains undefined

//var selectedPin = dataLayer.entities.get(PinID);

//Microsoft.Maps.Events.invoke(selectedPin, 'click', '');

}

网友答案:

Looks like for some reason e.target is not coming in displayInfobox function.

I have but modified your code a little bit at 2, 3 places to get something close to your intended point. Please check it below:

var map = null;    
var dataLayer = null;    
var infoboxLayer = null;

function loadMap() {

    //Prep default location    
    var defaultLocation = new Microsoft.Maps.Location(53.6880, -2.6646);

    //Prep Map Options    
    var mapOptions = {
        //credentials: 'KEY_REMOVED',
        center: defaultLocation,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        zoom: 7,
        enableClickableLogo: false,
        enableSearchLogo: false
    }

    //Initialise the primary map control
    map = new Microsoft.Maps.Map(document.getElementById('BobElliotMap'), mapOptions);

    //Add data layer
    dataLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(dataLayer);

    // Add infobox layer
    infoboxLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(infoboxLayer);

    //Prep InfoBox & add to infobox layer
    var infoboxOptions = {
        width: 300,
        height: 200,
        visible: false,
        offset: new Microsoft.Maps.Point(0, 20)
    };

    infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions);

    infoboxLayer.push(infobox);

    //Add Data to the map
    DrawPins();


    setTimeout(function() {
        //Initial zoom for testing zoomMap function
        var pushpin = dataLayer.get(0);
        var indx = dataLayer.indexOf(pushpin);
        zoomMap(indx, pushpin.getLocation().latitude, pushpin.getLocation().longitude);
    },500);

}


function displayInfobox(e) {

    if ( this.target.id && this.target.id.indexOf("pin") != -1 ) {
        alert("click event fired on pushpin");

        infobox.setOptions({
            title: this.target.Title,
            description: this.target.Description,
            visible: true,
            offset: new Microsoft.Maps.Point(0, 25)
        });

        infobox.setLocation(this.target.getLocation());

        //A buffer limit to use to specify the infobox must be away from the edges of the map.

        var buffer = 30;
        var infoboxOffset = infobox.getOffset();
        var infoboxAnchor = infobox.getAnchor();
        var infoboxLocation = map.tryLocationToPixel(this.target.getLocation(), Microsoft.Maps.PixelReference.control);
        var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x;
        var dy = infoboxLocation.y - 25 - infoboxAnchor.y;

        if (dy < buffer) { //Infobox overlaps with top of map.
            //#### Offset in opposite direction.
            dy *= -1;
            //#### add buffer from the top edge of the map.
            dy += buffer;
        } else {
            //#### If dy is greater than zero than it does not overlap.
            dy = 0;
        }

        if (dx < buffer) { //Check to see if overlapping with left side of map.
            //#### Offset in opposite direction.
            dx *= -1;
            //#### add a buffer from the left edge of the map.
            dx += buffer;
        } else { //Check to see if overlapping with right side of map.
            dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth();
            //#### If dx is greater than zero then it does not overlap.
            if (dx > buffer) {
                dx = 0;
            } else {
                //#### add a buffer from the right edge of the map.
                dx -= buffer;
            }
        }

        //#### Adjust the map so infobox is in view
        if (dx != 0 || dy != 0) {
            map.setView({
                centerOffset: new Microsoft.Maps.Point(dx, dy),
                center: map.getCenter()
            });
        }
    }
}


function DrawPins() {

    var pin0 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.1913, -2.51945));
    pin0.id = "pin_0";
    pin0.Title = "** CYCLONE CYCLES A/C CLOSED";
    pin0.Description = "74 WEAVER STREET<br />WINSFORD<br />CHESHIRE<br />CW7 4AA<br /><br /><b>Tel:</b> +44606861992";
    Microsoft.Maps.Events.addHandler(pin0, 'click', displayInfobox);
    dataLayer.push(pin0);
    var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.7485, -0.348162));
    pin1.id = "pin_1";
    pin1.Title = "**2 WHEELS CYCLES LIMITED - HULL";
    pin1.Description = "8 SPRING STREET<br />HULL<br />HU2 8RB<br /><br /><b>Tel:</b> +44482216170<br /><b>Fax:</b> +44828515<br /><b>Web:</b> <a href='http://www.2wheelscycles.co.uk' targer='_blank'>www.2wheelscycles.co.uk</a>";
    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
    dataLayer.push(pin1);
}


function zoomMap(indx, Lat, Long) {

    var ZoomLocation = new Microsoft.Maps.Location(Lat, Long);

    map.setView({
        zoom: 13,
        center: ZoomLocation
    });

    //#### These are the lines that dont work, selectedPin remains undefined
    //var selectedPin = dataLayer.entities.get(PinID);
    //Microsoft.Maps.Events.invoke(selectedPin, 'click', '');

    var selectedPin = dataLayer.get(indx);
    Microsoft.Maps.Events.invoke(selectedPin, 'click');
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: