Please help me to add description on mouse over on push pin in bing map? Or please help me to call a function when the mouse is over through the push pin Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "Ah6hamk-cQOK9E8CiVl2mvmNR1f0UWpQJXNKxuWNhDBWiFCbpreme4p6Qpj6C03s", mapTypeId: "r" });
}
function ClickGeocode(credentials) {
map.getCredentials(MakeGeocodeRequest);
}
function MakeGeocodeRequest(credentials) {
var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/Cochin?output=json&jsonp=GeocodeCallback&key=" + credentials;
CallRestService(geocodeRequest);
}
function GeocodeCallback(result) {
//alert("Found location: " + result.resourceSets[0].resources[0].name);
if开发者_Go百科 (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0) {
// Set the map view using the returned bounding box
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries });
// Add a pushpin at the found location
var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
//alert(location);
var pushpin = new Microsoft.Maps.Pushpin(location);
map.entities.push(pushpin);
}
}
function CallRestService(request) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
Between the "var pushpin" and "map.entities.push..." lines, add what I have below. That'll get you started. Basically, you are adding an event handler.
Note that the event is added to the "pin" in this case - but can be added to other objects such as the "infobox" if we had one here. There are only a few supported events - check docs. But you can do some neat stuff once you've wired the event. Have fun!
CODE:
var pushpin = new Microsoft.Maps.Pushpin(location);
Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () {
alert("The mouse went over the pin");});
map.entities.push(pushpin);
Llewellyn answer is valid. Another approach, is put a value for 'typeName' parameter in the pushpin line:
var pushpin = new Microsoft.Maps.Pushpin(location, {typeName: 'pin123'});
map.entities.push(pushpin);
next, using jQuery, you can add elements, or catch events:
$(".pin123" ).mouseover(function() { alert("hey!"); });
精彩评论