API Google Maps Nhiều điểm đánh dấu với Infowindows

92

Tôi đang cố gắng thêm nhiều điểm đánh dấu, mỗi điểm sẽ có thông tin riêng xuất hiện khi nhấp vào. Tôi đang gặp khó khăn với việc hiển thị các thông tin, khi tôi thử nó chỉ hiển thị một điểm đánh dấu mà không có thông tin hướng dẫn.

Cảm ơn, hãy cho tôi biết nếu bạn cần thêm thông tin

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
javascript  google-maps  google-maps-api-3  google-maps-markers  infowindow 
— stacktraceyo
nguồn
2
Chỉ sử dụng MỘT infowindow được tạo trước các điểm đánh dấu. Sau đó, sự kiện nhấp chuột của bạn cho mỗi điểm đánh dấu sẽ hoạt động chính xác. Biến contentbên trong trình xử lý sự kiện của bạn không được xác định trong hàm đó.
— js1568
1
Cũng giống như một nhận xét nhanh, nếu bạn định dạng mã của mình tốt, nó sẽ dễ đọc hơn rất nhiều.
— paullb
1
@paullb tôi sẽ định dạng lại nó, tôi đã viết câu hỏi này giống như 4 năm trước, khi tôi đã được nhiều hơn một người mới :)
— stacktraceyo
Kiểm tra hướng dẫn này để hiển thị nhiều thông tin điểm đánh dấu Hướng dẫn bằng cách nhấp và Di chuột freakyjolly.com/…
— Code Spy

Câu trả lời:

206

Bạn có thể sử dụng một đóng cửa. Chỉ cần sửa đổi mã của bạn như thế này:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
    };
})(marker,content,infowindow));

Đây là DEMO

— Kỹ sư
nguồn
2
Tôi đã làm việc này nhưng tôi sẽ thay đổi mã như thế nào để khi tôi nhấp vào một điểm đánh dấu khác, nó sẽ mở ra một infowindow thay thế infowindow đã mở trước đó, thay vì liên tục mở thêm infowindow mỗi khi tôi nhấp vào một điểm đánh dấu khác?
— railsy
nó hoạt động! nhưng ai đó có thể giải thích cho tôi tại sao nó hoạt động theo cách này không?
— Lakshay
1
@Lakshay Bạn có thể đọc về vấn đề tương tự ở đây
— Engineer
1
trong trường hợp này, làm thế nào để đóng infowindow khi bạn nhấp vào bên ngoài bản đồ?
— Rohit Tigga
Làm thế nào để đóng infowindow? infowindow.close()không hoạt động.
— mokiSRB
10

Đây là đoạn mã chắc chắn sẽ hoạt động. Bạn có thể truy cập liên kết dưới đây để biết chi tiết cách làm việc của jsFiddle và Explainantion. Cách định vị nhiều địa chỉ trên Google Maps với khả năng thu phóng hoàn hảo

var infowindow = new google.maps.InfoWindow();  
google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
           return function() {  
               var content = address;  
               infowindow.setContent(content);  
               infowindow.open(map, marker);  
           }  
         })(marker));
— evaipar
nguồn
5

Liên kết nguồn

Liên kết demo

Đoạn mã sau sẽ hiển thị Nhiều điểm đánh dấu với InfoWindow . Bạn có thể đang bỏ chú thích để hiển thị thông tin trên Hover cũng

nhập mô tả hình ảnh ở đây

            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    InforObj[0].close();
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
— Code Spy
nguồn
Một yêu cầu cho giải pháp này là việc sử dụng const cho infowindow và đánh dấu, nếu không nó không hoạt động ..
— Jim Jimson
2

Nếu bạn cũng muốn ràng buộc việc đóng infowindow với một số sự kiện, hãy thử một cái gì đó như thế này

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));
— Vinayak Kaniyarakkal
nguồn
0 
function setMarkers(map,locations){

for (var i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0];
 var lat = locations[i][1];
 var long = locations[i][2];
 var add =  locations[i][3];

 latlngset = new google.maps.LatLng(lat, long);

 var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
 });
 map.setCenter(marker.getPosition());


 marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;


 google.maps.events.addListener(marker,'click', function(map,marker){
          map.infowindow.setContent(marker.content);
          map.infowindow.open(map,marker);

 });

 }
}

Sau đó chuyển var infowindow = new google.maps.InfoWindow()đến initialize()chức năng:

function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(33.890542, 151.274856),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);
    map.infowindow = new google.maps.InfoWindow();

    setMarkers(map,locations)

  }
— js1568
nguồn
1
google.maps.events.AddListenernên đượcgoogle.maps.event.addListener
— Patrick Yan
Tôi nhận được TypeError: map.infowindow is undefinednếu tôi bao gồm var infowindow = new google.maps.InfoWindow();bên trong hàm khởi tạo () của mình
— gọi vào
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.