Question

我使用地理位置显示当前位置如下：

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 />';

但它在地图上显示静态图像。我想显示用户可以在地图上缩放的地图。我该如何使用地图？

Answer 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>

或

您也可以使用以下代码：

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

Answer 2

您使用的地图只是谷歌地图的静态图片。要显示动态地图，请尝试使用此代码。

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

无法使用地理位置显示自动缩放地图

2 个答案: