Question

我是谷歌地图中的新东西，我在数据库MySQL中存储了纬度和经度。我想用我拥有的纬度和经度显示谷歌地图。这是我从数据库获取纬度和经度的ajax代码

$.ajax({
            url: 'phpmobile/getlanglong.php',
            data: { "id": getacara},
            dataType: 'json',
            success: function(data, status){
                $.each(data, function(i,item){ 
                    showMap(item.latitude,item.longitude);

                });
            },
            error: function(){
                output.text('There was an error loading the data.');
            }
        });

这是我对showMap的功能

function showMap(_lat,_long)
{
    var map;

    var myLatLng = {lat: _lat, lng: _long};
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
           center: {lat: _lat, lng: _long},
           zoom: 20
        });
        var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: 'Hello World!'
        });
    }
}

并准备好文件

$( document ).ready(function() {
    showMap();
});

这是我的getlanglong.php

<?php
session_start();
include "config.php";

$idacara=mysql_real_escape_string($_GET["id"]);
$mysql = ("SELECT latitude,longitude FROM `acara` WHERE id_acara='$idacara'");
$result=mysql_query($mysql);
if (!empty($result))
{

    while ($row=mysql_fetch_array($result))
    {
        $latlong[] = array(
        'latitude' => $row['latitude'], 
        'longitude' => $row['longitude'],
        );

    }
}

mysql_close($con);

header('Content-Type:application/json');
echo json_encode($latlong);
?>

谢谢

Answer 1

作为加载地图然后根据ajax请求（未测试）的响应添加标记的示例

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Google Maps</title>
        <script src='https://maps.google.com/maps/api/js' type='text/javascript'></script>
        <script type='text/javascript'>
            (function(){

                var map,marker,latlng;
                /* initial locations for map */
                var _lat=56;
                var _lng=-2;

                function showMap(){
                    /* set the default initial location */
                    latlng={ lat: _lat, lng: _lng };

                    /* invoke the map */
                    map = new google.maps.Map( document.getElementById('map'), {
                       center:latlng,
                       zoom: 20
                    });

                    /* show the initial marker */
                    marker = new google.maps.Marker({
                       position:latlng,
                       map: map,
                       title: 'Hello World!'
                    });


                    /* I think you can use the jQuery like this within the showMap function? */
                    $.ajax({
                        url: 'phpmobile/getlanglong.php',
                        data: { "id": getacara },
                        dataType: 'json',
                        success: function( data, status ){
                            $.each( data, function( i,item ){

                                /* add a marker for each location in response data */ 
                                addMarker( item.latitude, item.longitude, 'A title ~ could be returned in json data' );
                            });
                        },
                        error: function(){
                            output.text('There was an error loading the data.');
                        }
                    });                 
                }

                /* simple function just to add a new marker */
                function addMarker(lat,lng,title){
                    marker = new google.maps.Marker({
                       position:{lat:lat,lng:lng},
                       map: map,
                       title: title
                    });
                }

                document.addEventListener( 'DOMContentLoaded', showMap, false );
            }());
        </script>
    </head>
    <body>
        <div id='map' style='width:600px;height:400px'></div>
    </body>
</html>

我在最后一次尝试代码时发现的一件事是，正如你所提到的，有一个与not a number有关的错误所以我通过使用parseFloat做了一个小改动，以确保latlng对象文字得到数字而不是字符串。下面是整个页面的一个经过全面测试和运行的示例〜它是一个用于测试目的的all-in-one页面，当然，如果不进行编辑，数据库详细信息和表格查找将无法直接为您工作。

修改

<?php
    if( $_SERVER['REQUEST_METHOD']=='GET' && isset( $_GET['ajax'] ) ){

        $dbhost =   'localhost';
        $dbuser =   'root'; 
        $dbpwd  =   'xx'; 
        $dbname =   'xxx';
        $db     =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

        $places=array();

        $sql    =   'select 
                        `location_name` as \'name\',
                        `location_Latitude` as \'lat\',
                        `location_Longitude` as \'lng\'
                        from `maps`
                        limit 100';

        $res    =   $db->query( $sql );
        if( $res ) while( $rs=$res->fetch_object() ) $places[]=array( 'latitude'=>$rs->lat, 'longitude'=>$rs->lng, 'name'=>$rs->name );
        $db->close();

        header( 'Content-Type: application/json' );
        echo json_encode( $places,JSON_FORCE_OBJECT );
        exit();
    }
?>
<!doctype html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Google Maps</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src='https://maps.google.com/maps/api/js' type='text/javascript'></script>
        <script type='text/javascript'>
            (function(){

                var map,marker,latlng,bounds,infowin;
                /* initial locations for map */
                var _lat=56.61543329027024;
                var _lng=-2.9266123065796137;

                var getacara=0; /* What should this be? is it a function, a variable ???*/

                function showMap(){
                    /* set the default initial location */
                    latlng={ lat: _lat, lng: _lng };

                    bounds = new google.maps.LatLngBounds();
                    infowin = new google.maps.InfoWindow();

                    /* invoke the map */
                    map = new google.maps.Map( document.getElementById('map'), {
                       center:latlng,
                       zoom: 10
                    });

                    /* show the initial marker */
                    marker = new google.maps.Marker({
                       position:latlng,
                       map: map,
                       title: 'Hello World!'
                    });
                    bounds.extend( marker.position );


                    /* I think you can use the jQuery like this within the showMap function? */
                    $.ajax({
                        /* 
                            I'm using the same page for the db results but you would 
                            change the below to point to your php script ~ namely
                            phpmobile/getlanglong.php
                        */
                        url: document.location.href,/*'phpmobile/getlanglong.php'*/
                        data: { 'id': getacara, 'ajax':true },
                        dataType: 'json',
                        success: function( data, status ){
                            $.each( data, function( i,item ){
                                /* add a marker for each location in response data */ 
                                addMarker( item.latitude, item.longitude, item.name );
                            });
                        },
                        error: function(){
                            output.text('There was an error loading the data.');
                        }
                    });                 
                }

                /* simple function just to add a new marker */
                function addMarker(lat,lng,title){
                    marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */
                       position:{ lat:parseFloat( lat ), lng:parseFloat( lng ) },
                       map:map,
                       title:title
                    });

                    google.maps.event.addListener( marker, 'click', function(event){
                        infowin.setContent(this.title);
                        infowin.open(map,this);
                        infowin.setPosition(this.position);
                    }.bind( marker ));

                    bounds.extend( marker.position );
                    map.fitBounds( bounds );
                }


                document.addEventListener( 'DOMContentLoaded', showMap, false );
            }());
        </script>
        <style>
            html, html body, #map{ height:100%; width:100%; padding:0; margin:0; }
        </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

从MySQL获取纬度和经度以显示Google Map

1 个答案:

修改