要繪製在地圖上的地址,請按照下列步驟操作:
第1步:包括谷歌地圖API的腳本文件
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
第2步:創建一個地圖元素
<div id="map" style="height: 550px; width: 100%;"></div>
步驟3:聲明地圖元素並將地址進行地理編碼以繪製標記的代碼
<script type="text/javascript">
// ====== Create map objects ======
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geo = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
// ====== Geocoding ======
function getAddress(search) {
geo.geocode({address:search}, function (results,status)
{
// If that was successful
if (status == google.maps.GeocoderStatus.OK) {
// Lets assume that the first marker is the one we want
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
// Output the data
createMarker(search,lat,lng);
}
// ====== Decode the error status ======
else {
alert('Something went wrong. Please Try again.');
}
}
);
}
// ======= Function to create a marker
function createMarker(location,lat,lng) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map
});
google.maps.event.addListener(marker, 'click', function() {
alert("Your Location : "+location);
});
bounds.extend(marker.position);
}
</script>
第4步:從數據庫中獲取地址,並在具有給定地址變量的腳本中調用地理編碼函數getAddress('address from db')
。
<?php
$city = $row["city"];
$street = $row["streetname"];
?>
<script>
getAddress('<?php echo $street.','.$city; ?>');
</script>
我希望你能很容易理解這段代碼。如果有關於此代碼的問題,請告訴我。
首先閱讀[Google Maps API](https://developers.google.com/maps/)上的文檔 –
您正在尋找生成地圖還是僅查看緯度經度? –
我讀過的東西需要將城市和街道名稱轉換爲緯度經度,然後從該點生成地圖。我需要整個過程的一些幫助。 – Hazelcraft