Question

我有lng / lat值存储在mysql中并试图在谷歌地图上显示它们......

 <?php  
    require ('db_info.php');
    $connection = mysql_connect($server, $username, $password);
    $db_selected = mysql_select_db($database, $connection);

    ?>

    <html lang="en">
    {% include 'components/head.html' %}

    <body>
    <div id = "wrapper">
    {% include 'components/nav-account.html' %}
    <div id = "page-wrapper">
    {% include 'components/alerts.html' %}

    <div class = "container">
    <style type = "text/css">
    html, body, #map-canvas{ height:100%;
    margin:0;
    padding:0;
    }
    </style>
    <script type = "text/javascript"
    src = "https://maps.googleapis.com/maps/api/js?
                            key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs">
    </script>
    <script type="text/javascript">

    function addMarker(lat, lng){
        var pt = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: pt,
            map: map
        });
    }

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

     google.maps.event.addDomListener(window, 'load', initialize);

    <?php 
        $query = mysql_query("select * from tester") or die(mysql_error());
        while($row = mysql_fetch_array($query)){

            $lat = $row['lat'];
            $lng = $row['lng'];           
            echo ("addMarker($lat, $lng)");       
        }
    ?>


    </script>

    <div id="map-canvas" style="height:600px; width:600px;
         margin-top:100px; margin-bottom: 100px;
         ">

    </div>
    </div>
    {% include 'components/footer.html' %}    
    </div>
    </div>
    </body>
    </html>

目前地图根本没有显示，但是在我尝试从数据库中检索信息之前。任何帮助将不胜感激！

Answer 1

您需要将addMarker调用移动到initialize函数内部。在进行初始化调用之前，没有地图，因此无法添加标记。

我没有检查代码的语法。你还需要一个名为map的全局javascript变量... var map = null; 这需要在initialize调用之外，然后抛弃var map，而只是使用map =

 <?php  
    require ('db_info.php');
    $connection = mysql_connect($server, $username, $password);
    $db_selected = mysql_select_db($database, $connection);

    ?>

    <html lang="en">
    {% include 'components/head.html' %}

    <body>
    <div id = "wrapper">
    {% include 'components/nav-account.html' %}
    <div id = "page-wrapper">
    {% include 'components/alerts.html' %}

    <div class = "container">
    <style type = "text/css">
    html, body, #map-canvas{ height:100%;
    margin:0;
    padding:0;
    }
    </style>
    <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 pt = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: pt,
            map: map
        });
    }

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

    <?php 
        $query = mysql_query("select * from tester") or die(mysql_error());
        while($row = mysql_fetch_array($query)){

            $lat = $row['lat'];
            $lng = $row['lng'];           
            echo "addMarker($lat, $lng);";       
        }
    ?>
  } 

     google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <div id="map-canvas" style="height:600px; width:600px;
         margin-top:100px; margin-bottom: 100px;
         ">

    </div>
    </div>
    {% include 'components/footer.html' %}    
    </div>
    </div>
    </body>

从mysql在谷歌地图上显示标记

1 个答案: