在javascript中设置谷歌地图标记图标属性

Set google maps marker icon properties in javascript

本文关键字：图标 属性 地图 谷歌 javascript 设置      更新时间：2023-10-06

我正在尝试使用javascript:从xml的数据中"样式化"标记

        var title = 'Speed: '+$(this).find('Speed').text();
        var lat = $(this).find('lat').text();
        var lng = $(this).find('lng').text();

        var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
        bounds.extend(markerCoords);
        var marker = new google.maps.Marker({
            position: markerCoords,
            title: title,
            icon: {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 5,
                strokeWeight: 2,
                fillColor: '#009933',
                fillOpacity: 1,
                rotation: 0,
                anchor: new google.maps.Point(0,2)
      },

到目前为止，这非常有效。我似乎不能对图标中的选项做同样的事情。以下是我试图以完全不显示标记的相同方式放置旋转编号：

            var marker = new google.maps.Marker({
            position: markerCoords,
            title: title,
            icon: {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 5,
                strokeWeight: 2,
                fillColor: '#009933',
                fillOpacity: 1,
                rotation: $(this).find('rotation').text(),
                anchor: new google.maps.Point(0,2)
      },

当我尝试将其作为变量添加到手上时，它也不会：

        var title = 'Speed: '+$(this).find('Speed').text();
        var lat = $(this).find('lat').text();
        var lng = $(this).find('lng').text();
        var rotation = $(this).find('rotation').text();
        var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
        bounds.extend(markerCoords);
        var marker = new google.maps.Marker({
            position: markerCoords,
            title: title,
            icon: {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 5,
                strokeWeight: 2,
                fillColor: '#009933',
                fillOpacity: 1,
                rotation: rotation,
                anchor: new google.maps.Point(0,2)
      },

我唯一能想到的是，整个图标需要作为一个长字符串，但我不知道如何做到这一点。

为了清楚起见，数据本身来自一个xml文件：

<markers>
 <marker>
  <lat>50.11966</lat>
  <lng>-5.54409</lng>
  <Speed>0</Speed>
  <rotation>0</rotation>
  <icon>google.maps.SymbolPath.CIRCLE</icon>
  <fillColor>#0099FF</fillColor>
 </marker>
 <marker>
  <lat>50.12173</lat>
  <lng>-5.53225</lng>
  <Speed>200</Speed>
  <rotation>0</rotation>
  <icon>google.maps.SymbolPath.FORWARD_CLOSED_ARROW</icon>
  <fillColor>#009933</fillColor>
 </marker>
</markers>

有人能帮忙吗？

编辑：

多亏了贾里德·史密斯，我才得以成功。因此，旋转是一个数字，但路径和fillColor都是字符串。有人能建议如何使用字符串吗？

var marker = new google.maps.Marker({
            position: markerCoords,
            title: title,
            icon: {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 5,
                strokeWeight: 2,
                fillColor: '#009933',
                fillOpacity: 1,
                rotation: parseInt($(this).find('rotation').text(), 10),
                anchor: new google.maps.Point(0,2)
      },

编辑2:

这不是渲染。任何想法：

  var title = 'Speed: '+$(this).find('Speed').text();
        var lat = $(this).find('lat').text();
        var lng = $(this).find('lng').text();
        //var rotation = $(this).find('rotation').text();
        var type = (function(foo) {
            var arr = foo.find('icon').text().split('.');
            return arr[arr.length-1];
        })($(this))
        var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
        bounds.extend(markerCoords);
        var marker = new google.maps.Marker({
            position: markerCoords,
            title: title,
            icon: {
                path: new google.maps.SymbolPath[arr],
                scale: 5,
                strokeWeight: 2,
                fillColor: '#009933',
                fillOpacity: 1,
                rotation: parseInt($(this).find('rotation').text(), 10),
                anchor: new google.maps.Point(0,2)
      },

当我使用这个时也不会：

            icon: {
                path: new google.maps.SymbolPath[type],

你能看到我是否错误地应用了你的代码吗？

从google地图API引用，图标符号对象的旋转属性应该是一个数字，因此parseInt($(this).find('rotation').text(), 10);

根据您下面的评论，您还有另一个问题，需要使用new调用SymbolPath构造函数。至于如何从XML文件中获取值，您只需要以下代码：

var type = (function(foo) {
    var arr = foo.find('icon').text().split('.');
    return arr[arr.length-1];
})($(this));

然后在标记选项中

icon: {
    path: new google.maps.SymbolPath[type]()

如果您可以更改XML文件，那么我建议将路径行减少为仅为SymbolPath值，如<icon>CIRCLE</icon>

编辑：您需要确保为标记对象设置了贴图。有两种方法：

1） 在构造函数选项中执行

var marker = new.google.maps.Marker({
    map: myGoogleMap,
    position: new google.maps.LatLng(x, y),
    title: 'my marker',
    icon: //blah, blah, blah
});

2） 在完成所有任务后，在循环中使用方法调用：

for (var i=0, len=markers.length; i<len; ++i) {
    markers[i].setMap(myGoogleMap);
}

第二个也可以用于隐藏标记，只需.setMap(null);，但其中任何一个都可以正常工作（不需要同时执行这两个操作）。

相关文章：