討厭鬼之前發了一篇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>

創作者介紹
創作者 討厭鬼 的頭像
討厭鬼

討厭鬼教學

討厭鬼 發表在 痞客邦 留言(0) 人氣()