Question

$.get('file.php')
.done(function(data) {
    var arrayObj = JSON.parse(data);
     $.each(arrayObj , function(key, value) {
            console.log(value.code);
        });
});

Answer 1

我想建议两页：

在第一页中，您从数据库中获取经度，纬度并使用iframe调用地图页面。 e.g。

<?php
/* Code to get latitude and longitude */
/* store value in $lat and $lon */ 
 $map_url = "map_php.php?lon=$lon&lat=$lat";
?>

<div id="maps" class="tab-pane fade">
 <div class="hpadding20">
   <iframe src="<?=$map_url?>" align="center" name="mymap" scrolling="No" width="100%" height="500" style="" frameborder="0"></iframe>
 </div>
</div>

在地图生成部分的第二页写代码中。 e.g。

<?php
$lat = $_GET["lat"];
 $lon = $_GET["lon"];
?>

 <!-- Placeholder for the Google Map -->
<div id="googleMap" style="width: 725px; height: 500px;"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?    sensor=false"></script>
<script>
var myCenter=new google.maps.LatLng('<?=$lat?>', '<?=$lon?>');
function initialize()
{
  var mapProp = {
   zoom: 16,
   center:myCenter,
    mapTypeId:google.maps.MapTypeId.ROADMAP
 };

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

var marker=new google.maps.Marker({
   position:myCenter,
  });

marker.setMap(map);
}

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

试试吧。我认为这对你有用。根据您的要求设置地图属性和缩放级别。

Answer 2

我使用您提供的链接复制了一个脚本，它会在您第一次打开页面时询问您的位置，当您拖放标记时，它会将纬度和经度放入输入框

<!DOCTYPE html>
<html lang="en">
    <head>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        var map, latLng, marker, infoWindow, ad;
        var geocoder = new google.maps.Geocoder();

        function showAddress(val) {
            infoWindow.close();
            geocoder.geocode({
                'address': val
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    marker.setPosition(results[0].geometry.location);
                    geocode(results[0].geometry.location);
                } else {
                    alert("Sorry but Google Maps could not find this location.");
                }
            });
        }

        function geocode(position) {
            geocoder.geocode({
                latLng: position
            }, function(responses) {
                var html = '';
                window.location.hash = '#' + marker.getPosition().lat() + "," + marker.getPosition().lng();
                if (responses && responses.length > 0) {

                    html += '<p>Address: ' + responses[0].formatted_address + ' </p>';
                }
                html += 'Latitude : ' + marker.getPosition().lat() + '<br/>Longitude: ' + marker.getPosition().lng();
                document.getElementById('lat1').value = marker.getPosition().lat();
                document.getElementById('lang1').value = marker.getPosition().lng();
                map.panTo(marker.getPosition());
                infoWindow.setContent("<div id='iw'>" + html + "</div>");
                infoWindow.open(map, marker);
            });
        }

        function initialize() {
            var myOptions = {
                zoom: 12,
                panControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
            var coordinates = window.location.hash;
            if (coordinates != "") {
                var hashlocation = coordinates.split(",");
                if (hashlocation.length == 2) {
                    showMap(hashlocation[0].substr(1), hashlocation[1], true);
                    return;
                }
            }
            if (navigator.geolocation) {
                defaultLocation();
                navigator.geolocation.getCurrentPosition(locationFound, defaultLocation);
            } else {
                defaultLocation();
            }
        }

        function locationFound(position) {
            showMap(position.coords.latitude, position.coords.longitude);
        }

        function defaultLocation() {
            showMap(38.8977, -77.0366);
        }

        function showMap(lat, lng, hideinfo) {
            latLng = new google.maps.LatLng(lat, lng);

            map.setCenter(latLng);
            marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            infoWindow = new google.maps.InfoWindow({
                content: '<div id="iw"><strong>Instructions:</strong><br /><br />Click and drag this red marker to spot exact location of your media.</div>'
            });
            if (hideinfo) {
                geocode(latLng);
            } else {
                infoWindow.open(map, marker);
            }
            google.maps.event.addListener(marker, 'dragstart', function(e) {
                infoWindow.close();
            });
            google.maps.event.addListener(marker, 'dragend', function(e) {
                var point = marker.getPosition();
                map.panTo(point);
                geocode(point);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
        #googlemaps
        {
            height: 400px;
            width: 700px;
        }
    </style>
</head>
<body>
    <label for="latitude" class="control-label col-xs-4">Latitude</label>
    <input id="lat1" value="" name="latitude" type="text">
    <label for="longitude" class="control-label col-xs-4">Longitude</label>
    <input id="lang1" value="" name="longitude" type="text">
    <div style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" id="googlemaps"></div>
</body>

如何在基于经度和纬度的地图展示时更新地图，即;从数据库中获取

2 个答案: