VEShape.SetIconAnchor Method
You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.
Sets the info box anchor of the VEShape object.
VEShape.SetIconAnchor(point);
Parameters
| Parameter | Description |
|---|---|
point |
A VELatLong Class object representing the shape's info box anchor point. |
Remarks
This value is ignored for a pushpin. A pushpin's icon anchor point, either custom or default, is always the latitude and longitude of the pin itself.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
var map = null;
var lat1 = 44.890661025750134;
var lon1 = -85.39930343627931;
var latLong01 = new VELatLong(lat1, lon1); //Elk Rapids
var latLong02 = new VELatLong(44.75453548416006, -85.62744140625001); //Traverse City
var latLong03 = new VELatLong(44.98131376911565, -85.21270751953125); //Bellaire
var poly01 = null;
var pin02 = null;
var pin03 = null;
var shape = null;
var points01 = [
new VELatLong(lat1, lon1 - 0.15),
new VELatLong(lat1 + 0.1, lon1 - 0.05),
new VELatLong(lat1 + 0.1, lon1 + 0.05),
new VELatLong(lat1, lon1 + 0.15),
new VELatLong(lat1 - 0.1, lon1 + 0.05),
new VELatLong(lat1 - 0.1, lon1 - 0.05)];
var inTheLake = new VELatLong(lat1 - .007, lon1);
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
// This sample only works in 2D mode (SetCustomIcon w/HTML)
if (map.GetMapMode() != VEMapMode.Mode2D)
{
alert("This sample only works in 2D mode");
return;
}
map.SetCenterAndZoom(latLong01, 10);
map.SetMapStyle(VEMapStyle.Hybrid);
map.AttachEvent("onclick", ShapeInfo);
AddShapes();
}
function AddShapes()
{
//Create VEShape objects, assign parameters, and add to the map.
poly01 = new VEShape(VEShapeType.Polygon, points01);
poly01.SetTitle("poly01");
poly01.SetCustomIcon(
"<span style='font-family:Arial; font-size:x-small;" +
"color:Black; background-color:White'>" +
"<img src='images/boat.jpg'/>poly01</span>");
poly01.SetIconAnchor(inTheLake);
map.AddShape(poly01);
pin02 = new VEShape(VEShapeType.Pushpin, latLong02);
pin02.SetTitle("pin02");
pin02.SetCustomIcon(
"<span style='font-family:Arial; font-size:x-small;" +
"color:Black; background-color:White'>" +
"<img src='images/ski.jpg'/>pin02</span>");
map.AddShape(pin02);
pin03 = new VEShape(VEShapeType.Pushpin, latLong03);
pin03.SetTitle("pin03");
pin03.SetCustomIcon(
"<span style='font-family:Arial; font-size:x-small;" +
"color:Black; background-color:White'>" +
"<img src='images/boat.jpg'/>pin03</span>");
map.AddShape(pin03);
}
function ShapeInfo(e)
{
if(e.elementID != null)
{
shape = map.GetShapeByID(e.elementID);
//Respond to ctrl-click event (toggle polygon icon visibility).
//Note that pushpin shapes ignore ShowIcon and HideIcon.
if(e.ctrlKey == 1)
{
shape.HideIcon();
}
else
{
shape.ShowIcon();
}
//Display information for the selected shape.
var info = "";
info += "ID (event object): " + e.elementID + "<br />";
info += "ID (GetID method): " + shape.GetID() + "<br />";
info += "Type: " + shape.GetType() + "<br />";
info += "Title: " + shape.GetTitle() + "<br />";
icon = shape.GetCustomIcon();
info += "Icon: " + icon + "<br />";
//Note that the Icon Anchor value for pushpin shapes is always
//the latitude and longitude of the pin itself.
info += "Icon Anchor: " + shape.GetIconAnchor() + "<br />";
label.innerHTML = info;
}
}
</script>
</head>
<body onload="GetMap();" style="font-family:Arial">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
Ctrl-click to hide the polygon icon.<br />
Click any shape for info.
<div id="label"></div>
</body>
</html>