Има три ключови точки, на които трябва да се отговори, за да намерите решение на вашия въпрос.
- За да добавите функционалност, когато се щракне върху маркер, трябва да добавите приемател към събитието щракване т.е.
marker.addListener("click", function (evt) { ...etc
- За да смените цвета на SVG маркер, имате нужда от две отделни икони за този маркер. Свойството на иконата е неизменно и следователно трябва да се актуализира само с помощта на метода
set() т.е. marker.set("icon", markerIcon);
- За да принудите опресняване на екрана, след като новата икона е зададена, трябва да актуализирате дисплея на картата -
map.update(-1, 0);
Комбинирането на тези точки заедно има работещ пример, приложен по-долу. Трябва да замените своя собствен идентификационен номер и токен на приложението, за да го накарате да работи курс.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>Highlighing a marker: Istanbul (Not Constantinople)</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script language="javascript" src="http://api.maps.nokia.com/2.2.4/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p> Click on the marker to change it.</p>
<div id="gmapcanvas" style="width:600px; height:600px;" > </div><br/><br/>
<script type="text/javascript">
// <![CDATA[
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
/////////////////////////////////////////////////////////////////////////////////////
map = new nokia.maps.map.Display(document.getElementById('gmapcanvas'), {
'components': [
// Behavior collection
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar()
],
'zoomLevel': 5, // Zoom level for the map
'center': [41.0125,28.975833] // Center coordinates
});
// Remove zoom.MouseWheel behavior for better page scrolling experience
map.removeComponent(map.getComponentById("zoom.MouseWheel"));
var iconSVG =
'<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">' +
'<circle stroke="__ACCENTCOLOR__" fill="__MAINCOLOR__" cx="16" cy="16" r="16" />' +
'<text x="16" y="20" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="__ACCENTCOLOR__" textContent="__TEXTCONTENT__">__TEXT__</text>' +
'</svg>',
svgParser = new nokia.maps.gfx.SvgParser(),
// Helper function that allows us to easily set the text and color of our SVG marker.
createIcon = function (text, mainColor, accentColor) {
var svg = iconSVG
.replace(/__TEXTCONTENT__/g, text)
.replace(/__TEXT__/g, text)
.replace(/__ACCENTCOLOR__/g, accentColor)
.replace(/__MAINCOLOR__/g, mainColor);
return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(svg));
};
/* On mouse over we want to change the marker's color and text
* hence we create two svg icons which we flip on mouse over.
*/
var markerText = "1";
var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF" , "#000000"];
var markerIcon= createIcon("1", "#F00", "#FFF");
map.addListener("click", function (evt) {
var target = evt.target;
if (target instanceof nokia.maps.map.Marker && (target.clickCount === undefined) == false){
target.clickCount++;
var icon = createIcon(target.clickCount, colors[target.clickCount%7], "#FFF");
target.set("icon", icon);
map.update(-1, 0);
}
if (evt.target instanceof nokia.maps.map.Spatial) {
evt.stopImmediatePropagation();
}
});
var istanbul = new nokia.maps.map.Marker(
// Geo coordinate of Istanbul
[41.0125,28.975833],
{
icon: markerIcon,
clickCount : 1
}
);
/// Let's add another marker for comparison:
var bucharest = new nokia.maps.map.Marker(
// Geo coordinate of Bucharest
[44.4325, 26.103889],
{
icon: markerIcon,
clickCount: 1
}
);
// We add the marker to the map's object collection so it will be rendered onto the map.
map.objects.addAll([istanbul, bucharest]);
// ]]>
</script>
</body>
</html>
person
Jason Fox
schedule
02.05.2013
