如何在mysql表中标记Google Map中的多个位置？

Question

如何在Google地图中标记多个位置。 Latitude和Longitute从我的表中获取为json响应。 请检查以下代码和json响应并纠正我？ 当我alert(myCenter)纬度和经度显示正确，但在地图上显示不正确

Json编码

[{"id":"1","lat":"9.9710364","lng":"76.2382596","address":"Ernakulam, pra"},{"id":"2","lat":"9.5946677"
,"lng":"76.5030831","address":"Kochi pra"},{"id":"3","lat":"8.8862925","lng":"76.5850831","address":"Kollam
 pra"},{"id":"4","lat":"8.4998965","lng":"76.8543216","address":"Trivandrum pra"}]

码

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
            <title>Bootstrap 101 Template</title>

            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">   
        </head>
        <body>
        <h1>Load Multiple Marker</h1>
        <div id="googleMap" style="width: 800px; height: 500px;">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <!-- Map -->
        <script src="http://maps.googleapis.com/maps/api/js"></script>
            <script>
                $(function(){
                    $.ajax({
                        url: 'geo-locations.php',
                        success:function(data){
                            //Loop through each location.
                            $.each(data, function(){
                                //Plot the location as a marker
                                var myCenter = new google.maps.LatLng(this.lat, this.lng);
//alert(myCenter)
                                function initialize()
                                {
                                    var mapProp = {
                                        center: myCenter,
                                        zoom:5,
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                    };

                                    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

                                    var marker = new google.maps.Marker({
                                        position: myCenter,
                                        title:'Click to zoom'
                                    });

                                    marker.setMap(map);

                                    // Zoom to 9 when clicking on marker
                                    google.maps.event.addListener(marker,'click',function() {
                                        map.setZoom(9);
                                        map.setCenter(marker.getPosition());
                                    });
                                }
                                google.maps.event.addDomListener(window, 'load', initialize);
                            });
                        }
                    });
                });
            </script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        </body>
        </html>

Answer 1

无需为每个标记初始化地图实例，您可以将流程更改为：

初始化地图
加载数据后，将标记放置在地图上

例

 $(function () { $.ajax({ url: 'https://rawgit.com/vgrem/e2dda2a255a24df92bff/raw/d9c694b635612ee405c7d16c355dca19adb6380c/geo-locations.json', success: function (data) { initialize(data); } }); }); function addMarker(map,position){ var marker = new google.maps.Marker({ position: position, title: 'Click to zoom' }); marker.setMap(map); // Zoom to 9 when clicking on marker google.maps.event.addListener(marker, 'click', function () { map.setZoom(9); map.setCenter(marker.getPosition()); }); } function initialize(data) { var mapProp = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var bounds = new google.maps.LatLngBounds(); $.each(data,function(pos) { var pos = new google.maps.LatLng(this.lat, this.lng); bounds.extend(pos); addMarker(map,pos); }); map.fitBounds(bounds); }

 <h1>Load Multiple Marker</h1> <div id="googleMap" style="width: 800px; height: 500px;"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js"></script>

PhpFiddle

如何在mysql表中标记Google Map中的多个位置？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-03 10:13:40

如何在mysql表中标记Google Map中的多个位置？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-03 10:13:40

解决方案1
0 已采纳 2016-03-03 10:13:40