谷歌地圖疊加

標記添加到谷歌地圖：

谷歌地圖 - 疊加

疊印是必然緯度/經度坐標地圖上的對象。

谷歌地圖有幾種疊加層：

標記 - 地圖上的位置單。標記還可以顯示自定義圖標的圖像
折線 - 一個地圖上的直線系列
多邊形 - 的地圖上直線系列，形狀是“封閉”
圓和矩形
信息窗口 - 顯示在地圖上方的彈出氣球中的內容
自定義疊加

谷歌地圖 - 添加標記

標記構造函數創建一個標記。（注意，位置屬性必須設置為標記來顯示）。

通過使用標記添加到地圖setMap()方法：

例

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

marker.setMap(map);

試一試»

谷歌地圖 - 動畫的標記

下面的例子演示了如何用動畫動畫屬性標記：

例

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

marker.setMap(map);

試一試»

谷歌地圖 - 圖標代替標記

下面的例子指定的圖像(icon) ，而不是使用默認的標記：

例

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

marker.setMap(map);

試一試»

谷歌地圖 - 折線

折線是通過在一系列有序坐標繪製的線。

折線支持以下屬性：

路徑 - 指定行幾個緯度/經度坐標
則strokeColor -指定一個十六進制顏色為線(format: "#FFFFFF")
strokeOpacity，用於 - 指定的行的不透明度（0.0和1.0之間的值）
strokeWeight，用於 - 指定線的筆觸以像素為單位重量
編輯-定義線路是否是用戶可編輯的(true/false)

例

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

試一試»

谷歌地圖 - 多邊形

多邊形類似於折線在於，它包括在一個有序序列一系列坐標的。然而，多邊形被設計成一個封閉的循環內定義的區域。

多邊形是由直線，形狀"closed" （所有的線連接起來）。

多邊形支持以下屬性：

路徑 - 指定了幾個經緯度坐標線（第一和最後一個坐標是相等的）
則strokeColor -指定一個十六進制顏色為線(format: "#FFFFFF")
strokeOpacity，用於 - 指定的行的不透明度（0.0和1.0之間的值）
strokeWeight，用於 - 指定線的筆觸以像素為單位重量
填充顏色-指定封閉區域內該地區十六進制的顏色(format: "#FFFFFF")
fillOpacity - 指定填充顏色的不透明度（0.0和1.0之間的值）
編輯-定義線路是否是用戶可編輯的(true/false)

例

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
});

試一試»

谷歌地圖 - 圈

一個圓形支持以下屬性：

中心 - 指定的圓的中心的google.maps.LatLng
半徑 - 指定的圓的半徑，米
則strokeColor -指定繞了一圈線條的十六進制顏色(format: "#FFFFFF")
strokeOpacity，用於 - 指定筆觸顏色的不透明性（0.0和1.0之間的值）
strokeWeight，用於 - 指定線的筆觸以像素為單位重量
填充顏色-指定圓內該地區十六進制的顏色(format: "#FFFFFF")
fillOpacity - 指定填充顏色的不透明度（0.0和1.0之間的值）
編輯-定義圓是否是用戶可編輯的(true/false)

例

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

試一試»

谷歌地圖 - 信息窗口

顯示與標記一些文本內容的信息窗口：

例

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

infowindow.open(map,marker);

試一試»