javascript - 从数据库获取所有纬度和经度以显示谷歌地图上的所有位置

标签 javascript php mysql google-maps

我关注的是 php 页面,它从 mysql 数据库中获取单个纬度和经度,并且可以通过鼠标对其进行编辑。我的意思是我可以通过点击标记来移动位置。

好吧,现在,我的数据库中几乎没有纬度和经度。我想在 map 上显示所有纬度和经度。我怎样才能做到这一点。

Javascript 代码:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>

<script type="text/javascript">

// Map Initialize function

function initialize() 
{
// Set static latitude, longitude value
var latlng = new google.mpaps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
// Set map options
var myOptions = {
    zoom: 16,
    center: latlng,
    panControl: true,
    zoomControl: true,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create and set the marker
marker = new google.maps.Marker({
    map: map,
    draggable:true, 
    position: latlng
});

// Register Custom "dragend" Event
google.maps.event.addListener(marker, 'dragend', function() {

    // Get the Current position, where the pointer was dropped
    var point = marker.getPosition();
    // Center the map at given point
    map.panTo(point);
    // Update the textbox
    document.getElementById('txt_latlng').value=point.lat()+", "+point.lng();
});
}

</script>

HTML 代码:

<div style="float:left; position:relative; width:550px; border:0px #000 solid;">
<div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
</div>                   

PHP代码:

$id = (int) $_GET['id'];
$sql = mysql_query("SELECT * FROM parkings WHERE LocId = '$id'");
$res =  mysql_fetch_array($sql);
$lat_d = $res['latitude'];
$long_d = $res['longitude'];

有什么想法或我该怎么做吗?

最佳答案

像这样的东西应该可以解决问题。

<?php

// this code block contains some test stuff
$lat_d = 40.709;
$long_d = -74.007;

// mimic a result array from MySQL
$result = array(array('latitude'=>$lat_d,'longitude'=>$long_d));

?>
<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
        <script type="text/javascript">
        var map;
        function initialize() {
            // Set static latitude, longitude value
            var latlng = new google.maps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
            // Set map options
            var myOptions = {
                zoom: 16,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            // Create map object with options
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        <?php
            // uncomment the 2 lines below to get real data from the db
            // $result = mysql_query("SELECT * FROM parkings");
            // while ($row = mysql_fetch_array($result))
            foreach($result as $row) // <- remove this line
                echo "addMarker(new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."), map);";
        ?>
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true, // enables drag & drop
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>
    </head>
    <body onload="initialize()">
        <div style="float:left; position:relative; width:550px; border:0px #000 solid;">
            <div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
        </div>
    </body>
</html>

关于javascript - 从数据库获取所有纬度和经度以显示谷歌地图上的所有位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19639069/

相关文章:

javascript - 读取javascript脚本index.html公共(public)文件夹中的类react js

javascript - 使用 jQuery,如何获取图像以全屏打开浏览器的高度和宽度?

php - Yii Framework 未知属性异常

php - 插入相关表mysql

php - 我如何使用 Symfony Doctrine :fixtures:load with multiple entity managers?

php - 优化用户兴趣排名算法

php - 通过用户操作在服务器上执行脚本

javascript - 在浏览器中使用纯 Javascript 对 XML 进行签名

javascript - 在 React-bootstrap 中单击 Dropdown.Item 后防止关闭

php - 在 Kohana w/ORM 中使用多个对象类型对多对多进行建模