Google map API 中有兩個不同圖像的兩個標記

Question

我有兩個標記我想讓每個標記都有自己的圖像，這里顯示兩個標記用同一張圖片我不希望它重復圖片我想要兩張不同的圖片。 請幫助我，真誠地感謝你。

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps Multiple Markers</title>
    <script src="http://maps.google.com/maps/api/js?key= AIzaSyCpuOArmqJRLE8nl9V_g-KH7M8zwhsnFf0&callback=intiMap" type="text/javascript"></script>

</head>

<body>

    <div id="map" style="width: 800px; height: 600px;"></div>

    <script type="text/javascript">
        var locations = [
            ['جامعة الملك سعود', 24.729004, 46.624154, 1],
            ['جامعة الإمام محمد بن سعود', 24.814796, 46.7127355, 2],

        ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(24.6742437, 46.7759905),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: {
                    url: "https://3.top4top.net/p_1390st3q12.png"
                },
                icon: {
                    url: "https://6.top4top.net/p_1390latqo1.png"
                }
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    </script>
</body>

</html> ```

Answer 1

您所要做的就是創建圖標數組並在迭代中訪問它。

看看我的片段，祝你有美好的一天:)

   <html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Google Maps Multiple Markers</title>
        <script src="http://maps.google.com/maps/api/js?key= AIzaSyCpuOArmqJRLE8nl9V_g-KH7M8zwhsnFf0&callback=intiMap" type="text/javascript"></script>

    </head>

    <body>

        <div id="map" style="width: 800px; height: 600px;"></div>

        <script type="text/javascript">
            var locations = [
                ['جامعة الملك سعود', 24.729004, 46.624154, 1],
                ['جامعة الإمام محمد بن سعود', 24.814796, 46.7127355, 2],

            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(24.6742437, 46.7759905),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            // make new array for icons
            var icons = [
              "https://3.top4top.net/p_1390st3q12.png",
              "https://6.top4top.net/p_1390latqo1.png"
            ]

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: {
                        // access icons by iteration
                        url: icons[i]
                    }
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        </script>
    </body>

    </html>

Answer 2

@hifebriansyah 現在可以使用了，非常感謝您，感謝您抽出時間來解決我的問題。

Google map API 中有兩個不同圖像的兩個標記

問題描述

1 個解決方案

解決方案1
0 已采納 2019-10-22 22:16:10

解決方案2
-1 2019-10-22 22:35:59

Google map API 中有兩個不同圖像的兩個標記

問題描述

1 個解決方案

解決方案1 0 已采納 2019-10-22 22:16:10

解決方案2 -1 2019-10-22 22:35:59

解決方案1
0 已采納 2019-10-22 22:16:10

解決方案2
-1 2019-10-22 22:35:59