Here.com (Nokia Api for Maps): Как управлять кругами с изменением цвета при нажатии?

Я использую Nokia API для своего веб-приложения (Javascript) и рисую круги на своей карте с использованием другого радиума. Дело в том, что когда я увеличиваю масштаб, круг имеет тот же размер, что означает, что когда я увеличиваю масштаб, появляется уровень, на котором я больше ничего не вижу, поскольку он покрывает всю карту. Следовательно, я хочу, чтобы круг сохранял тот же размер, даже если я увеличиваю масштаб.

Для этого я попробовал маркеры SVG, которые решают эту проблему, но дело в том, что мне пришлось программировать, когда я нажимаю на один из них, цвет должен измениться (все это беспорядок, и это снижает производительность приложения).

Если бы кто-нибудь мог мне помочь, это было бы здорово!


javascript here-api
person devio    schedule 28.04.2013    source источник
comment
Кто-нибудь может помочь, пожалуйста?   -  person devio    schedule 01.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Есть три ключевых момента, на которые необходимо ответить, чтобы найти решение вашего вопроса.

  • Чтобы добавить функциональность при щелчке по маркеру, необходимо добавить прослушиватель к событию click т.е. 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;" >&nbsp;</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
comment
Спасибо, Джейсон, за ответ. Я действительно сделал то же самое. Но, как я сказал в своем посте, проблема в том, что мне нужно управлять изменением цветов (это зависит от количества щелчков маркера, мне пришлось его запрограммировать). Итак, мне нужно знать, есть ли способ, предварительно реализованный в Nokia API, который справляется со всем этим. Потому что я провел много исследований, но ничего не нашел. Спасибо. - person devio; 03.05.2013
comment
Было неясно, что вы хотите менять цвета на каждом click событии. Структура базового примера все еще сохраняется, но я изменил ее, чтобы она изменялась при каждом щелчке мышью. Чтобы код был аккуратным, вы должны посмотреть событие Делегирование - просто создайте единственную функцию, способную обновлять любой маркер, и свяжите данные, специфичные для маркера, как дополнительное свойство. - person Jason Fox; 03.05.2013
comment
Кстати, в этом примере не нажимайте на маркеры слишком быстро - я не отключал масштабирование двойным щелчком. - person Jason Fox; 03.05.2013