Google JS API動態地為每個標記提供不同的標記圖像

Question

我正在用他跟隨js來添加google map，它在foreach循環中從數據庫中提取了我的所有位置，我希望每個標記都有一個不同的圖標，並將其存儲在by字段中。

假設例如我有一個名為filename的字段，它將存儲圖像路徑/名稱（icon.jpg）。

我想知道如何才能使用August Li編寫的腳本來做到這一點。

 <script type="text/javascript">
            //Sample code written by August Li
            var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
                       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                       new google.maps.Point(16, 32));
            var center = null;
            var map = null;
            var currentPopup;
            var bounds = new google.maps.LatLngBounds();
            function addMarker(lat, lng, info) {
                var pt = new google.maps.LatLng(lat, lng);
                bounds.extend(pt);
                var marker = new google.maps.Marker({
                    position: pt,
                    icon: icon,
                    map: map
                });
                var popup = new google.maps.InfoWindow({
                    content: info,
                    maxWidth: 300
                });
                google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });
            }           
            function initMap() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                    },
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.ZOOM_PAN
                    }
                });
<?php

foreach ($dataProvider->models as $model) {
    echo "addMarker({$model->lat}, {$model->lon}, '<b>$model->name</b><br />$model->website');";
}

?>
 center = bounds.getCenter();
     map.fitBounds(bounds);

     }
     </script>

Answer 1

您只需要一個類似的功能：

function makeIcon(filename) {
    return new google.maps.MarkerImage(
                   "http://example.com/path/to/icons/" + filename,
                   new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                   new google.maps.Point(16, 32)
               );
}

當然會更新圖標文件位置的路徑。

然后，您需要更新addMarker函數以接受圖標參數：

        function addMarker(lat, lng, gicon, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: gicon,
                map: map
            });
            ...

然后在您的PHP循環中，您需要單獨添加makeIcon（）調用。 因此，例如

<?php
foreach ($dataProvider->models as $model) {
    echo "gicon = makeIcon(your filename);";
    echo "addMarker({$model->lat}, {$model->lon}, gicon, '<b>$model->name</b><br />$model->website');";
}
?>

這將根據您的文件名回顯代碼以獲取gIcon對象，然后將其傳遞給修改后的addMarker。