谷歌地图上没有显示自定义图标

Question

我遇到的问题只是我无法加载自定义图标。标记本身会加载，但仅使用默认图标。如果我设置图标，我可以加载自定义图标：手动输入标记对象，如下所示：

        var marker = new google.maps.Marker({
            position: places[i],
            map: map,
            icon: sizeIcons['one']
        })

然后它们都加载得很好。但我想设置大小，所以我添加了下面的代码，该代码在我的 KML 生成器中有效，但由于某种原因无法生成我的自定义图标。任何想法为什么？我没有发布所有代码，但 $content[1] 的值是 50 到 450 之间的数字。

index.html

$sizeFloat = (int) $content[1];
                    if($sizeFloat  < 50){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['one']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 50 && $sizeFloat < 70){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['two']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 70 && $sizeFloat < 75){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['three']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 75 && $sizeFloat < 88){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['four']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 88 && $sizeFloat < 100){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['five']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 100 && $sizeFloat < 125){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['six']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 125 && $sizeFloat < 150){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['seven']);
                        </script>
                        <?php

                    }
                    if($sizeFloat >= 150 && $sizeFloat < 175){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['eight']);
                        </script>
                        <?php

                    }
                    if($sizeFloat >= 175 && $sizeFloat < 200){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['nine']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 200 && $sizeFloat < 250){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['ten']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 250 && $sizeFloat < 275){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['eleven']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 275 && $sizeFloat < 350){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['twelve']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 350){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['thirteen']);
                        </script>
                        <?php
                    }

                    if ($content !== false) {
                    ?>
                        <script type="text/javascript">                             
                            places.push(new google.maps.LatLng(<?php echo json_encode($content[5]); ?>, <?php echo json_encode($content[6]); ?>));  
                        </script>
                    <?php           
                    }
                    $id = $id + 1;
                }       
                fclose($file);
            }
        ?>
    <script type="text/javascript" src="js/map.js"></script>

map.js

(function() {
    // Creating a variable that will hold the InfoWindow object
    var infowindow;
    // Creating an array that will contain all the size icons
    var sizeIcons = [];
    sizeIcons['one'] = new google.maps.MarkerImage(
        'images/25.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['two'] = new google.maps.MarkerImage(
        'images/50.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['three'] = new google.maps.MarkerImage(
        'images/70.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['four'] = new google.maps.MarkerImage(
        'images/75.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['five'] = new google.maps.MarkerImage(
        'images/88.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['six'] = new google.maps.MarkerImage(
        'images/100.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['seven'] = new google.maps.MarkerImage(
        'images/125.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['eight'] = new google.maps.MarkerImage(
        'images/150.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['nine'] = new google.maps.MarkerImage(
        'images/175.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['ten'] = new google.maps.MarkerImage(
        'images/200.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['eleven'] = new google.maps.MarkerImage(
        'images/250.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['twelve'] = new google.maps.MarkerImage(
        'images/275.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['thirteen'] = new google.maps.MarkerImage(
        'images/425.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );

    window.onload = function() {
        // Creating an object literal containing the properties
        // we want to pass to the map
        var options = {
            zoom: 5,
            center: new google.maps.LatLng(39.09, -95.71),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Creating the map
        var map = new google.maps.Map(document.getElementById('map'), options);
        // Creating a LatLngBounds object
        var bounds = new google.maps.LatLngBounds();

        // Creating a variable that will hold
        // the InfoWindow object
        var infowindow;
        // Looping through the places array
        for (var i = 0; i < places.length; i++) {
            // Adding the markers
            var marker = new google.maps.Marker({
                position: places[i],
                map: map,
                icon: markerType[i]
            });
            // Wrapping the event listener inside an anonymous function
            // that we immediately invoke and passes the variable i to.
            (function(i, marker) {
                // Creating the event listener. It now has access to the values of
                // i and marker as they were during its creation
                google.maps.event.addListener(marker, 'click', function() {
                // Check to see if we already have an InfoWindow
                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }
                // Setting the content of the InfoWindow
                infowindow.setContent('Place number ' + i);
                // Tying the InfoWindow to the marker
                infowindow.open(map, marker);
                });
            })(i, marker);
            // Extending the bounds object with each LatLng
            bounds.extend(places[i]);
        }
        // Adjusting the map to new bounding box
        map.fitBounds(bounds)
    };
})();

Answer 1

我不确定，但可能是由于您缺少起点：new google.maps.Point(0,0) 您当前在 null 中传递的位置。通常，当您将图像 URL 作为图标传递给时，地图 API 将为您创建 MarkerImage 对象并默认此信息并自动确定高度和宽度。我猜您希望您的图标与中心点对齐，因为您的锚点位于24,24。但是您可能需要定义一个起点，即使它是0,0。

您可以为这些使用精灵，因为谷歌让您能够使用单个图像和该图像中的多个“正方形”作为不同的点。因此，假设您有一个 100 x 100 像素的图像。在此图像中，您可以将 4 个 50x50 图标排列在一个网格中。所以一个MarkerImage 可能是从0,0 到50,50，而该行中的下一个是0,50 到100,50。第二行以此类推。