Question

我正在使用Bing Map，地图中有几个图钉。我有一个表，并在点击任何一行javascript函数执行，并在该JavaScript函数我有基于所选行的图钉的纬度和经度。现在我想改变那个从那一行得到的纬度和经度的图钉的颜色？提前谢谢。

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

Answer 1

简单的方法是加载您想要的另一个图钉图像的网址。但是还有其他几种方式（我知道）：

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，然后在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>

在Bing Map中基于纬度和经度改变图钉的颜色

1 个答案: