2015-12-30 33 views
1

我使用地理定位來顯示當前位置如下顯示自動縮放地圖:無法使用地理定位

echo '<div style="width:48%;float:left;"><img src="http://maps.google.com/maps/api/staticmap?center='.$lat.','.$long.'&markers=titel:You+are+here|icon:http://tinyurl.com/2ftvtt6|'.$lat.','.$long.'&zoom=17&size=550x450&maptype=roadmap&&sensor=true" width="550" height="450" alt="'.$geodata['formatted_address'].'" \/></div><div style="width:48%;float:right;">'; 
echo 'Latitude: '.$lat.' Longitude: '.$long.'<br />'; 

但它顯示在地圖上的靜態圖像。我想顯示用戶可以在地圖上縮放的地圖。 如何使用地圖?

回答

1

你可以做到這一點象下面這樣:

您可以使用的iframe爲

我試着做請求您需要使用iframe來顯示緯度,經度和結果需要的變焦:

<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q='+YOUR_LAT+','+YOUR_LON+'&hl=es;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?q='+data.lat+','+data.lon+'&hl=es;z=14&amp;output=embed" style="color:#0000FF;text-align:left" target="_blank">See map bigger</a></small> 

OR

您可以使用下面的代碼太:

<script type="text/javascript"> 
    var map; 
    var infowindow; 
    var marker; 
    var geocoder = new google.maps.Geocoder(); 
    function initialize(address) { 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var latitude = results[0].geometry.location.lat(); 
       var longitude = results[0].geometry.location.lng(); 
       map = new google.maps.Map(document.getElementById('map'), { 
        center: new google.maps.LatLng(latitude, longitude), 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(latitude, longitude), 
        map: map, 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 

       google.maps.event.trigger(marker, "click"); 
      } else { 
       alert("Something got wrong " + status); 
      } 
     }); 
    } 
    jQuery(document).ready(function() { 
     initialize("[your address]"); 
    }); 
</script> 
<div id="map" style="height: 350px; width: 100%;"></div> 
1

您正在使用的地圖只是谷歌地圖的靜態圖像。要顯示動態地圖,請嘗試此代碼。

<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div>