如何动态在Google地图标记上显示数据库值?

时间:2017-01-12 05:10:59

标签: php mysql arrays google-maps

这是我从数据库中获取记录并显示在线用户的代码

$markers = array();         
$sql_locations1="SELECT DISTINCT uid,latitude,longitude from `location` where uid='$_REQUEST[locator_id]' ORDER by `date_time` DESC limit 1";
$result1 = mysqli_query($conn,$sql_locations1);
    while($row=mysqli_fetch_assoc($result1))
        {                   
        $markers[] = array(
        'abc',
        $row['latitude'],
        $row['longitude'],          
        );      
        }?>
<div id="map_canvas" onload="initMap()"></div>

你可以看到&#39; abc&#39;在数组中,它的静态值显示在地图上的每个标记上。我想要的是来自db的用户名在他们自己的标记上的位置&#39; abc&#39;静态值 我不知道如何在那个地方获得这个db值。下面是我的地图功能

<script>
function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: "roadmap",
        center: new google.maps.LatLng(20.5937, 78.9629), // somewhere in the uk BEWARE center is required
        zoom: 1,
    };
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    // Multiple Markers
    var markers = <?php echo json_encode( $markers );?>;
     // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow();
    var marker, i;
    // Loop through our array of markers & place each one on the map
    for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click',  (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    //Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
        this.setZoom(5);
        google.maps.event.removeListener(boundsListener);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

请提前帮助我

2 个答案:

答案 0 :(得分:0)

您可以编写连接查询以从数据库中获取用户名并在地图的信息窗口中显示:

// Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click',  (function (marker, i) {
        return function () {
            infoWindow.setContent(markers[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

答案 1 :(得分:0)

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