使用php,javascript和json添加地图标记

时间:2015-08-17 16:13:31

标签: javascript php mysql json google-maps-markers

尝试通过使用php然后使用json_encode()检索来自mysql的标记,然后在javascript中使用结果。目前我正在为我显示地图,但标记不是!

MarkersController.php - 从数据库中获取信息。

$list = array();

while ($row = mysqli_fetch_assoc($result)) {
    $list[] = array(
        array('lat' => $lat), 
        array('lng' => $lng));
}
echo json_encode($list);

landing.html上

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
                    <script type = "text/javascript"
                            src = "https://maps.googleapis.com/maps/api/js?
                            key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs">
                    </script>
                    <script type="text/javascript">
                                var map = null;
                                function addMarker(lat, lng) {
                                var myLatLng = new google.maps.LatLng(lat, lng);
                                        marker = new google.maps.Marker({
                                        position: myLatLng,
                                                map: map
                                        });
                                }


                        function initialize() {
                        var mapOptions = {
                        center: {lat: 54.872128, lng: - 6.284874},
                                zoom: 13
                        };
  map = new google.maps.Map(document.getElementById('map-canvas'),
                                        mapOptions);

        $.getJSON('MarkersController.php', function(data){
                                $.each(data, function(lat, lng){
                                addMarker('lat', 'lng');
                                });
                                })
                            }
          google.maps.event.addDomListener(window, 'load', initialize);

                    </script>

尝试使用MarkersController.php中的数组来实现addMarker()函数。

1 个答案:

答案 0 :(得分:0)

在回显之前尝试header('Content-Type: application/json');,或者从服务器获得的结果将是纯文本。