个人中心
gpt4 book ai didi

javascript - Here.com(诺基亚 map Api): How to manage circles with changing colors on click?

转载 作者：行者123 更新时间：2023-11-28 09:11:29 26 4
gpt4 key购买 nike

我正在为我的网络应用程序 (Javascript) 使用诺基亚 API，并使用不同的半径在 map 中绘制圆圈。问题是当我放大时，圆圈具有相同的大小，这意味着当我放大时，有一个级别我看不到其他任何东西，因为它覆盖了整个 map 。因此，即使放大，我也希望圆圈保持相同的大小。

为此，我尝试了 SVG 标记，它解决了这个问题，但问题是当我单击其中一个标记时，我必须进行编程，颜色必须改变(这一切都是一团糟，并且它降低了应用程序)。

如果有人能帮助我，那就太棒了!

最佳答案

需要回答三个关键点才能找到您的问题的解决方案。

  • 要在单击标记时添加功能，您需要向 click 事件添加一个监听器即 marker.addListener (“点击”，函数(evt){...等
  • 要切换 SVG 标记的颜色，您需要该标记的两个单独的图标。 icon 属性是不可变的，因此只能使用 set() 方法来更新它即 marker.set("icon “，标记图标)；
  • 要在设置新图标后强制刷新屏幕，您需要更新 map 显示 - map.update(-1, 0);

将这些要点结合在一起，下面附加了一个工作示例。您需要替换为您自己的 app id and token当然是让它发挥作用。

<!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>

关于javascript - Here.com(诺基亚 map Api): How to manage circles with changing colors on click?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16267322/

26 4 0
文章推荐： javascript - 将数组插入多维数组
文章推荐： javascript - 如何组合重复的javascript
文章推荐： javascript - LimeJS 上的 GUI 层
文章推荐： javascript - 表单验证器检查选项并选择检查不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com