如何从SQL数据库添加谷歌地图标记

时间:2017-04-14 13:35:00

标签: javascript php google-maps google-maps-api-3

我有一个谷歌地图,我想为我在数据库中添加的每个元素添加一个新标记(使用纬度和经度)。 这就是我所做的不起作用。 谢谢你的帮助。

<?php
    $reponse = $bdd->query('SELECT * FROM zdou ORDER BY id ');
    while ($donnees = $reponse->fetch()){

    ?>
        <p>
            <strong>latitude</strong> : <?php echo $donnees['latitude']; ?><br/>
            <strong>longitude</strong> : <?php echo $donnees['longitude']; ?><br/>
        </p>
        <?php
            $latitude = $donnees['latitude'];
            $longitude = $donnees['longitude'];
        ?>
        <script>
            latitude = <?php echo $latitude ?>;
            longitude = <?php echo $longitude ?>;
            marker = new google.maps.LatLng(latitude, longitude);
            var placerMarker = new google.maps.Marker({position:marker,map:map,title:"Zdou"});
        </script>
        <?php
    }
    $reponse->closeCursor();
        ?>

我用这样的用户位置创建了地图:

function showPosition(position) {
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            latlon = new google.maps.LatLng(lat, lon)
            mapholder = document.getElementById('mapholder')
            mapholder.style.height = '250px';
            mapholder.style.width = '500px';

            var myOptions = {
            center:latlon,zoom:12,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
            }
            var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
            var myPos = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

        }

编辑: 我创建了一个变量,每次进入while循环中的“script”时都会递增,然后显示该变量。 猜猜看,变量是未定义的,因此循环中的脚本不会被读取。 还需要一些帮助!

1 个答案:

答案 0 :(得分:0)

尝试将地图变量设为全局。因为在php循环中创建标记时没有定义它。

var map;
function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
    center:latlon,zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var myPos = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

}

同样看看https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

相关问题