Question

指定用于google.maps.Marker的图标时，我会遇到奇怪且不可预测的行为。基本上，如果我没有指定icon属性，标记会显示（使用默认图标），但如果我指定icon属性，则不显示任何标记（尽管我有其他情况，我可以获取要显示的自定义图标，这就是为什么它很奇怪。

以下是相关代码：

              function initMap() {
                var markers = route_log.map(function(segment) {
                  return new google.maps.Marker({
                    position: new google.maps.LatLng(segment.lat, segment.lng)
                  });
                });

                ...calculate bounds..

                var map = new google.maps.Map(document.getElementById('route_log_map_map'), {
                  position: bounds.getCenter(),
                  zoom: 15
                });

                ...other unrelated code...

                for(i=0; i < markers.length; i++) {
                   markers[i].setMap(map);
                }
              }

这称为：

<script src="https://maps.googleapis.com/maps/api/js?key=...key...&amp;callback=initMap" async="" defer=""></script>

以上结果为：

显然，在这种情况下使用它是一个糟糕的标记（差不多有2000点），所以如果我将标记创建更改为：

                var markers = route_log.map(function(segment) {
                  return new google.maps.Marker({
                    position: new google.maps.LatLng(segment.lat, segment.lng),
                    icon: {
                      path: google.maps.SymbolPath.CIRCLE,
                      scale: 1
                    }
                  });
                });

标记未显示（并且也没有错误）（请注意，这些蓝色圆圈与此代码无关）：

修改

这很有趣。如果我正在构建标记的数组只有一个元素，但是如果它有多个元素则无法显示它。例如。这可以工作并显示一个标记：

                var route_log = [
                  {lat: 41.86219805, lng: -71.04886590000001}
                ];
                var markers = route_log.map(function(segment) {
                  return new google.maps.Marker({
                    position: new google.maps.LatLng(segment.lat, segment.lng),
                    icon: {
                      path: google.maps.SymbolPath.CIRCLE,
                      scale: 10
                    }
                  });
                });

但是这不显示任何标记（只有更改是向数组中添加另一个元素）：

                var route_log = [
                  {lat: 41.86219805, lng: -71.04886590000001},
                  {lat: 41.87219805, lng: -71.05886590000001}
                ];
                var markers = route_log.map(function(segment) {
                  return new google.maps.Marker({
                    position: new google.maps.LatLng(segment.lat, segment.lng),
                    icon: {
                      path: google.maps.SymbolPath.CIRCLE,
                      scale: 10
                    }
                  });
                });

Answer 1

哇。

我在position电话的选项中有new google.maps.Map。它应该是center，这是必需的。 position甚至不是google.maps.MapOptions的有效选项。

我责怪Google Maps API。： - ）

使用自定义图标标记的Google地图有时无法显示

1 个答案: