Question

我正在尝试使用javascript从

        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],

您能否查看我是否错误地应用了您的代码？

Answer 1

来自google maps API reference图标符号对象的rotation属性应为数字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文件，那么我建议将路径线减少到仅像<icon>CIRCLE</icon>

这样的SymbolPath值

编辑：您需要确保为标记对象设置地图。有两种方法可以做到这一点：

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);，但任何一个都可以正常工作（您不需要同时执行这两个操作）。

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

1 个答案: