Fatal编程技术网
  • javascript/
  • Javascript 从mysql在google地图上显示标记

Javascript 从mysql在google地图上显示标记

javascript php mysql

Javascript 从mysql在google地图上显示标记,javascript,php,mysql,google-maps-markers,Javascript,Php,Mysql,Google Maps Markers,我将lng/lat值存储在mysql中，并尝试在谷歌地图上显示它们 <?php require ('db_info.php'); $connection = mysql_connect($server, $username, $password); $db_selected = mysql_select_db($database, $connection); ?> <html lang="en"> {% inclu

我将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>


{%include'组件/head.html%}
{%include'组件/nav account.html%}
{%include'组件/alerts.html%}
html、正文、地图画布{高度：100%；
保证金：0；
填充：0；
}
功能添加标记器（lat、lng）{
var pt=新的google.maps.LatLng（lat，lng）；
var marker=new google.maps.marker({
职位：pt，
地图：地图
});
}
函数初始化（）{
变量映射选项={
中心：{lat:54.872128，lng:-6.284874}，
缩放：15
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
} 
google.maps.event.addDomListener（窗口“加载”，初始化）；
{%include'组件/footer.html%}
目前，地图根本没有显示，但它是在我试图从数据库检索信息之前显示的。
任何帮助都将不胜感激

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

我没有检查你的代码的语法。 您还需要一个名为map的全局javascript变量。。。 var-map=null； 这需要在initialize调用之外，然后在内部放弃var映射，而只使用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>


{%include'组件/head.html%}
{%include'组件/nav account.html%}
{%include'组件/alerts.html%}
html、正文、地图画布{高度：100%；
保证金：0；
填充：0；
}
var-map=null；
功能添加标记器（lat、lng）{
var pt=新的google.maps.LatLng（lat，lng）；
var marker=new google.maps.marker({
职位：pt，
地图：地图
});
}
函数初始化（）{
变量映射选项={
中心：{lat:54.872128，lng:-6.284874}，
缩放：15
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
} 
google.maps.event.addDomListener（窗口“加载”，初始化）；
{%include'组件/footer.html%}
是否可以尝试在此处添加另一个分号<代码>回声（“添加标记（$lat，$lng）；”@Don'tPanic-不错的位置，但不幸的是仍然没有：（干杯-但是仍然不起作用，所以可能是语法问题？！我会检查这一点以及我的数据库信息。我的问题可能是我在javascript函数中使用php吗？不……记住php将文本推送到浏览器……这样你就可以在任何地方编写javascript。浏览器一旦启动，就会执行javascript接收所有页面（由php生成）…我没有看到任何明显的语法问题…但是如果你能准确地描述你看到的东西，那将是非常有帮助的。啊，好的。谢谢。我是我的页眉、导航栏和页脚，但没有其他内容。从初始化中删除php部分后，我可以看到我的地图，但显然没有标记！因此，你的php代码可能有问题…你应该检查你的eb服务器记录日志以查看问题所在。