Два маркера с двумя разными изображениями в Google map API - PullRequest
Новая
       12

Два маркера с двумя разными изображениями в Google map API

0 голосов
/ 23 октября 2019

У меня есть две метки, которые я хочу сделать, чтобы каждая метка имела свое изображение, и здесь показаны две метки с одной и той же картинкой. Я не хочу, чтобы она повторяла картинку. Мне нужны две разные картинки. Пожалуйста, помогите мне и искренне благодарю. 

<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> ```

1 Ответ

0 голосов
/ 23 октября 2019

все, что вам нужно сделать, это создать массив значков и получить к нему доступ в итерации.

посмотрите мой фрагмент и хорошего дня:) 

   <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>
...