根据 Bing Map 中的经纬度更改图钉的颜色答案

【问题标题】：Change color of pushpin based on latitude and longitude in Bing Map根据 Bing Map 中的经纬度更改图钉的颜色
【发布时间】：2013-11-22 16:17:20
【问题描述】：

我正在使用 Bing 地图，地图中有几个图钉。我有一张桌子，点击任何一行，一个javascript函数执行，在那个javascript函数中，我有基于选定行的图钉的纬度和经度。现在我想改变那个图钉的颜色，我从那一行得到它的纬度和经度？提前致谢。

function    func()
{
  var     latitude;
  var     longitude;
  //code to change color of pushpin already in map for these latitude and longitude
}

【问题讨论】：

标签： bing-maps pushpin

【解决方案1】：

最简单的方法是加载另一个图钉图像的 url，它是您想要的颜色。但是还有其他几种方法（我知道）：

Xaml 方法

这将使用 Xaml 创建一个自定义图钉：

<Canvas x:Name="POI" HorizontalAlignment="Left" Width="22" Height="22" UseLayoutRounding="False" VerticalAlignment="Top">

  <Ellipse  Fill="#FFF7F4F2" Height="22" Width="22"/>

  <Ellipse  Fill="#FF4498FE" Height="17" Canvas.Left="2.533" Canvas.Top="2.541" Width="17"/>

  <TextBlock x:Name="POITextBlock" TextWrapping="Wrap" TextAlignment="Center" FontFamily="Segoe UI" FontWeight="Bold" Foreground="#FFF7F4F2" Height="14" Canvas.Left="3" Canvas.Top="3" Width="16"/>

</Canvas>

用户控制方法

添加一个 UserControl，然后在 UserControl 标记内使用此代码：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Canvas Grid.ColumnSpan="2">
        <Image Source="ms-appx:///Images/pushpin.png" Canvas.Top="-45" Canvas.Left="-14" Height="50" Width="54" RenderTransformOrigin="0.593,1.74"/>
    </Canvas>
</Grid></li>

CSS 方法

一个示例可能是在图钉选项中输入“mypinclass”。 Bing 地图会在图钉容器中添加一个名为“mypinclass”的 css 类。

.mypinclass div{

color:red !important;

}

Javascript 方法：

    <script type="text/javascript">

      function getMap() {
        // Initialize the map
        map = new Microsoft.Maps.Map($('#map').get(0), {
          credentials: "Your Bing Maps Key",
          center: new Microsoft.Maps.Location(47.5, 2.75),
          zoom: 4,
          mapTypeId: Microsoft.Maps.MapTypeId.road
        });

            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75), { text: '1', typeName: 'sampleCustom' });
            map.entities.push(pin);
      }

    </script>
    <style type="text/css">
        .sampleCustom div { color: Red !important; };
    </style>
</head>
<body onload="getMap();">
    <div id="map" style="position: relative; width: 800px; height: 600px;">
    </div>
    <div id="opacitySlider" style="position: relative; width: 400px;">
    </div>
</body>
</html>

【讨论】：

@ILI 感谢您的回复，但我们可以仅使用 javascript 来完成，我不想再次创建图钉，我只想更改它的颜色。
添加了javascript示例^
抱歉，它改变的是图钉中文本的颜色，而不是图钉
是的，我将把它留给你，因为我的例子应该足以让你自己弄清楚。