討厭鬼之前發了一篇google map教學
想必各位客倌一定會覺得~怎麼這樣簡單!!
因為那一篇Google Map程式教學只有教你如何初始化地圖
而討厭鬼是為了衝流量怕一次寫太多大家看不懂
才會分兩次寫的~用心良苦呀
那這次要教什麼呢???????
這次要教的就是如何在地圖上查詢地址~並且定位加上標記
如果這篇看完後~各位看倌都做的出來
那討厭鬼會再發一篇~找出以地圖為中心半徑1公里以內的負四便利商店
那麼就先來這次的教學吧!!!
先以上次的Google Map程式教學這篇為基礎~還沒有看過的人快點去看
這次要再多加一個input欄位~用來輸入地址
以下是討厭鬼的html碼的範例
<body onload="initialize();">
<input type="text" id="address" onkeypress="searchAddr();">
<div id="map" style="width: 500px; height: 500px;">
</div>
</body>
在上面的範例中~討厭鬼用了一個onkeypress的事件
所以在input這邊每按下一個鍵~都會去執行一次searchAddr這個function
以下是searchAddr這個function裡所寫的程式碼
function searchAddr(){
if(window.event.keyCode==13){
var address = $.trim($("#address").val());
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address' : address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if(marker != null){
marker.setMap(null);
}
marker = new google.maps.Marker({
position : results[0].geometry.location,
map : map,
title : results[0].formatted_address
});
}
});
}
}
這邊就一行一行的說明會比較容易看的懂
window.event.keyCode==13 這邊是指按下enter這個按鍵
var address = $.trim($("#address").val()); 將id為address這個物件的值取出來(這邊是指input這個物件)
var geocoder = new google.maps.Geocoder(); 這個東東呢~就是google去查地圖位置的套件
接下來就是重頭戲了
geocoder.geocode({'address' : address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if(marker != null){
marker.setMap(null);
}
marker = new google.maps.Marker({
position : results[0].geometry.location,
map : map,
title : results[0].formatted_address
});
}
});
當在使用geocode時候，要給參教跟它說~要查詢的位址在哪?
就像{'address' : address}
address這個是geocode的內建的類別，後面所帶的值就是要查詢的位置
當然也可以輸入經緯度
內建的類別不只有address也有latlng
不過在使用latlng的時候~只能輸入經緯度，不能輸入地址
address的話是兩者都能用
geocode在查詢完後在回傳result與status
status == google.maps.GeocoderStatus.OK 這邊指的就是查詢沒有問題
那results裡面是回傳一個json型態~那裡面的資料有哪些就要自己去google查一下了
因為查詢結果會有多筆~通常又以第一筆為最近的結果
所以就用第一筆的位置重新將地圖定位
map.setCenter(results[0].geometry.location)
下面的這個寫法用意是在於先判斷地圖上有沒有定位點的標記
有的話先把它移出地圖
if(marker != null){
marker.setMap(null);
}
而下面這一段是在說新建一個定位點的標記
要在哪個地圖上標記，已及滑鼠移到標記上所顯示的文字
marker = new google.maps.Marker({
position : results[0].geometry.location,
map : map,
title : results[0].formatted_address
});
position 這裡給的是經緯度，型態要用google的 new google.maps.LatLng(24.9799050, 121.5404750);
map 指的是要在哪一個地圖上標記
title是指當滑鼠移過去標記時要顯示的文字
基本上到這邊的話~客位應該是還沒有做出來的
為什麼呢?因為Google Map程式教學的map是區域變數
而且沒有宣告marker
還有window.event.keyCode==13這個地方FrieFox不能用
以下是我整個做完的範例~各位可以看跟Google Map程式教學哪裡不一樣
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
var marker;
function initialize() {
var myOptions = {
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var pos = new google.maps.LatLng(24.9799050, 121.5404750);
map.setCenter(pos);
}
function searchAddr(){
if(window.event.keyCode==13){
var address = $.trim($("#address").val());
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address' : address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if(marker != null){
marker.setMap(null);
}
marker = new google.maps.Marker({
position : results[0].geometry.location,
map : map,
title : results[0].formatted_address
});
}
});
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>map</title>
</head>
<body onload="initialize();">
<input type="text" id="address" onkeypress="searchAddr();">
<div id="map" style="width: 500px; height: 500px;">
</div>
</body>
</html>
留言列表
程式教學 (5)