Question

我有来自数据库的lat lng的每个位置的标记，现在我想在InfoWindow中显示标记，当它被点击时显示来自它的每个数据行自己的标记，它们具有基于的信息来自数据库的lat lng。这是我的代码：

//menampilkan INFOWINDOW MARKER A

        var isi =
        "<b>Jumlah Kejadian</b> = 10 <br> <b>Kendaraan yang terlibat</b> = 10"
        ;

        var infowindow = new google.maps.InfoWindow({
          content: isi
        });

        google.maps.event.addListener(homeMarker, 'click', function() {
          infowindow.open(map,homeMarker);
        });

//menampilkan INFOWINDOW MARKER B
        var isi2 = 
        "<b>Jumlah Kejadian</b> = 1 <br> <b>Kendaraan yang terlibat</b> = 2"
        // '<IMG BORDER="1" ALIGN="center" SRC="rambulucu.jpg">'

        var infowindow2 = new google.maps.InfoWindow({
          content: isi2
        });

        google.maps.event.addListener(homeMarker2, 'click', function() {
          infowindow2.open(map,homeMarker2);
        });      
  }
});

该标记仅包含来自我自己的信息的信息，而不包含来自数据库的信息。这是我的数据库：

我希望表现出像Nama，Jumlah kejadian等等＃34;在单击的标记上显示仅包含其自己的数据

Answer 1

<script>    
function initialize() {

                          // you can pass your php variable to javascript variable(locations) as an array.
                            var locations = [
                            ['Lorem Ipsum Dolor sit amet 1', 1.1031994976981054,104.07207012176514, 3],
                            ['Lorem Ipsum Dolor sit amet 2', 1.1041994976981054,104.07307012176514, 2],
                            ['Lorem Ipsum Dolor sit amet 3', 1.1021994976981054,104.07407012176514, 1]
                                                ];

                                var myLatlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
                                var mapOptions = {
                                    zoom: 15,
                                    center: myLatlng
                                };



                                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                                var infowindow = new google.maps.InfoWindow();

                                var marker, i;
                                // you can use looping to show multiple marker.
                                    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
                                      });

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



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

                                google.maps.event.addListener(marker, 'dragend', function (e) {
                                    document.getElementById("Latitude").value = e.latLng.lat();
                                    document.getElementById("Longitude").value = e.latLng.lng();
                                });
                        }

                        google.maps.event.addDomListener(window, 'load', initialize);
</script>

<style>
 #map-canvas{
   width: 500px;
   border: 1px solid red;
   height: 500px;
 }
</style>

<div id="map-canvas"></div>

显示InfoWindow标记包含数据库中的数据

1 个答案: