Google 地圖疊圖

Google 地圖<span class="color_h1" 疊加層

在Google地圖中加入一個標記

Google 地圖- 疊加層

疊加層是地圖上綁定到經度/緯度座標的對象，會隨您拖曳或縮放地圖而移動。

Google 地圖 API 有以下幾種疊加層：

地圖上的點使用標記來顯示，通常顯示自訂圖示。標記是 GMarker 類型的對象，並且可以利用 GIcon 類型的物件來自訂圖示。
地圖上的線使用折線（表示點的集合）來顯示。線是型別為 GPolyline 的物件。
地圖上的區域顯示為多邊形（如果是任意形狀的區域）或底面疊層（如果是矩形區域）。多邊形類似於閉合的折線，因此可以是任何形狀。地面疊加層通常用於地圖上與圖塊有直接或間接關聯的區域。
地圖本身使用圖塊疊加層顯示。如果您有自己的系列圖塊，可以使用 GTileLayerOverlay 類別來改變地圖上已有的圖塊，甚至可以使用 GMapType 來建立您自己的地圖類型。
資訊視窗也是一種特殊的疊加層。但請注意，資訊視窗會自動新增到地圖中，地圖只能新增一個類型為 GInfoWindow 的物件。

Google 地圖 - 新增標記

記標識地圖上的點。預設情況下，它們使用 G_DEFAULT_ICON（您也可以指定自訂圖示）。 GMarker 建構函式將 GLatLng 和 GMarkerOptions（可選）物件作為參數。

標記設計為可互動。例如，預設情況下它們會接收 "click" 事件，常用於在事件偵聽器中開啟訊息視窗。

透過 setMap() 方法在地圖上新增標記:

實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

#執行實例»

點擊"運行實例"按鈕查看在線實例

Google 地圖- 可拖曳的標記

#以下實例將介紹如何使用animation 屬性來拖曳標記:

實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

運行實例»

點擊"運行實例"按鈕查看線上實例

#Google 地圖- 圖示

標記可以用自訂的新圖示來顯示，以取代預設圖示:

##實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

運行實例»

點擊"運行實例"按鈕查看線上實例

###

Google 地圖 - 折線

GPolyline 物件可在地圖上建立線性疊加層。 GPolyline 包含一系列點，並建立一系列有序連接這些點的線段。

折線支援以下屬性：

path - 指定了多個直線的緯度/經度座標
strokeColor - 指定直線的十六進位顏色值(格式: "#FFFFFF")
strokeOpacity - 指定直線的透明度(該值為0.0 到 1.0)
strokeWeight - 定義線的寬度,以像素為單位。
editable - 定義使用者是否可編輯直線(true/false)

實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:x,
  zoom:4,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

執行實例»

點擊"執行實例" 按鈕查看線上實例

Google 地圖- 多邊形

GPolygon 物件類似於GPolyline 對象，因為它們都包括一系列有序的點。但是，多邊形不像折線一樣有兩個端點，而是設計為定義形成閉環的區域。

和折線一樣，您可以自訂多邊形邊（線）的顏色、粗細和透明度，以及封閉的填滿區域的顏色和透明度。顏色應是十六進制數字 HTML 樣式。

多邊形支援以下屬性：

path - 指定多個直線緯度的座標(第一個和最後一個座標是相等的)
strokeColor - 指定直線的十六進位顏色值(格式: "#FFFFFF")
strokeOpacity -指定直線的透明度(該值為0.0 到 1.0)
strokeWeight - 定義線的寬度,以像素為單位。
fillColor - 指定閉合區域的十六進位顏色值(格式: "#FFFFFF")
##fillOpacity - 指定填滿顏色的透明度(該值為 0.0 到1.0)
editable - 定義使用者是否可編輯直線(true/false)

實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:x,
  zoom:4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

運行實例»點擊"運行實例"按鈕查看線上實例

Google 地圖- 圓

圓支援以下屬性：

#center - 指定圓的中心點參數google.maps.LatLng
radius - 指定圓的半徑，以公尺為單位
#strokeColor - 指定弧線的十六進位顏色值(格式: " #FFFFFF")
strokeOpacity - 指定弧線的透明度(該值為0.0 到 1.0)
strokeWeight -定義線的寬度,以像素為單位。
fillColor - 指定圓形的十六進位顏色值填色值(格式: "#FFFFFF")
##fillOpacity - 指定填色的透明度(該值為 0.0 到1.0)
定義使用者是否可編輯直線(true/false)

實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
  center:amsterdam,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

myCity.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

運行實例»點擊"運行實例"按鈕查看線上實例

Google 地圖- 資訊視窗

在一個標記上顯示一個文字訊息視窗：

實例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

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

運行實例»點擊"運行實例" 按鈕查看線上實例

Google 地圖- 疊加層參考手冊

Google Maps API 參考手冊.

← Google 地圖基礎

Google 地圖事件 →