根据Bing地图中的纬度和经度更改图钉的颜色

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

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

简单的方法是加载另一个图钉图像的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>

相关内容

最新更新

热门标签：