Question

我已经在我的数据库中存储了一些经度和纬度的位置！

我的问题是如何使用谷歌地图显示这些位置???

这是我的表结构：

姓名：gps

属性:( ID，经度，纬度）

这是我的代码：

   <html>      
  <!-- Inclusion de l'API Google Maps --> 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script>

   // On vérifie si le navigateur supporte la géolocalisation
   if(navigator.geolocation) {

function hasPosition(position) {
// Instanciation


 var point = new google.maps.LatLng(10.18153, 36.80649),

 // Ajustage des paramètres
 myOptions = {
  zoom: 15,
  center: point,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 },

 // Envoi de la carte dans la div
 mapDiv = document.getElementById("mapDiv"),
 map = new google.maps.Map(mapDiv, myOptions),

 marker = new google.maps.Marker({
  position: point,
  map: map,
  // Texte du point
  title: "Vous êtes ici"
  });
}
navigator.geolocation.getCurrentPosition(hasPosition);
 }
 </script>
  <style>
    #mapDiv {
    /* Modifier la taille de la carte avec width et height */
width:600px;
height:450px;
border:1px solid #efefef;
margin:auto;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
 }
  </style>
   <!-- La carte sera chargée ici -->
   <div id="mapDiv"></div>
    </div>
    </html>

任何想法??

Answer 1

希望此解决方案对您有所帮助，

CSS

<style>
    #map {
        height: 400px;
    }
</style>

HTML

 <div id="map"></div>

SCRIPT

NOTE: a = latitude , b = longitude

function initialize(a, b) {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(a, b);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
            map: map,
            position: latlng
        });
    }

如果你没有lat和long，你可以使用下面的代码找到lat和long。

function getLatLong(address) {

        var geo = new google.maps.Geocoder;
        geo.geocode({'address': address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                var add = results[0].geometry.location;


                initialize(add.lat(), add.lng());

            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }

        });
    }

使用谷歌地图显示存储在数据库中的位置

1 个答案: