免費(fèi)AI編程助手
Google 地圖疊加層
2019-09-21 17:18 更新
Google 地圖 <span class="color_h1" 疊加層<="" span="">
在Google地圖中添加一個(gè)標(biāo)記
Google 地圖 - 疊加層
疊加層是地圖上綁定到經(jīng)度/緯度坐標(biāo)的對象，會(huì)隨您拖動(dòng)或縮放地圖而移動(dòng)。
Google 地圖 API 有如下幾種疊加層：
- 地圖上的點(diǎn)使用標(biāo)記來顯示，通常顯示自定義圖標(biāo)。標(biāo)記是 GMarker 類型的對象，并且可以利用 GIcon 類型的對象來自定義圖標(biāo)。
- 地圖上的線使用折線（表示點(diǎn)的集合）來顯示。線是類型為 GPolyline 的對象。
- 地圖上的區(qū)域顯示為多邊形（如果是任意形狀的區(qū)域）或底面疊加層（如果是矩形區(qū)域）。多邊形類似于閉合的折線，因此可以是任何形狀。地面疊加層通常用于地圖上與圖塊有直接或間接關(guān)聯(lián)的區(qū)域。
- 地圖本身使用圖塊疊加層顯示。如果您有自己的系列圖塊，可以使用 GTileLayerOverlay 類來改變地圖上已有的圖塊，甚至可以使用 GMapType 來創(chuàng)建您自己的地圖類型。
- 信息窗口也是一種特殊的疊加層。但是請注意，信息窗口會(huì)自動(dòng)添加到地圖中，并且地圖只能添加一個(gè)類型為 GInfoWindow 的對象。
Google 地圖 - 添加標(biāo)記
記標(biāo)識地圖上的點(diǎn)。默認(rèn)情況下，它們使用 G_DEFAULT_ICON（您也可以指定自定義圖標(biāo)）。GMarker 構(gòu)造函數(shù)將 GLatLng 和 GMarkerOptions（可選）對象作為參數(shù)。
標(biāo)記設(shè)計(jì)為可交互。例如，默認(rèn)情況下它們接收 "click" 事件，常用于在事件偵聽器中打開信息窗口。通過 setMap() 方法在地圖上添加標(biāo)記:
Google 地圖 - 可拖動(dòng)的標(biāo)記
以下實(shí)例將介紹如何使用 animation 屬性來拖動(dòng)標(biāo)記:
實(shí)例
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
嘗試一下 ?
Google 地圖 - 圖標(biāo)
標(biāo)記可以用自定義的新圖標(biāo)來顯示，以替代默認(rèn)圖標(biāo):
實(shí)例
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
嘗試一下 ?
Google 地圖 - 折線
GPolyline 對象可在地圖上創(chuàng)建線性疊加層。GPolyline 包括一系列點(diǎn)，并創(chuàng)建一系列有序連接這些點(diǎn)的線段。
折線支持以下屬性：
- path - 指定了多個(gè)直線的緯度/經(jīng)度坐標(biāo)
- strokeColor - 指定直線的十六進(jìn)制顏色值(格式: "#FFFFFF")
- strokeOpacity - 指定直線的透明度(該值為 0.0 到 1.0)
- strokeWeight - 定義線的寬度,以像素為單位。
- editable - 定義用戶是否可編輯直線(true/false)
實(shí)例
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
嘗試一下 ?
Google 地圖 - 多邊形
GPolygon 對象類似于 GPolyline 對象，因?yàn)樗鼈兌及ㄒ幌盗杏行虻狞c(diǎn)。但是，多邊形不像折線一樣有兩個(gè)端點(diǎn)，而是設(shè)計(jì)為定義形成閉環(huán)的區(qū)域。
和折線一樣，您可以自定義多邊形邊（線）的顏色、粗細(xì)和透明度，以及封閉的填充區(qū)域的顏色和透明度。顏色應(yīng)是十六進(jìn)制數(shù)字 HTML 樣式。
多邊形支持以下屬性：
- path - 指定多個(gè)直線緯度的坐標(biāo) (第一個(gè)和最后一個(gè)坐標(biāo)是相等的)
- strokeColor - 指定直線的十六進(jìn)制顏色值(格式: "#FFFFFF")
- strokeOpacity -指定直線的透明度(該值為 0.0 到 1.0)
- strokeWeight - 定義線的寬度,以像素為單位。
- fillColor - 指定閉合區(qū)域的十六進(jìn)制顏色值 (格式: "#FFFFFF")
- fillOpacity - 指定填充顏色的透明度 (該值為 0.0 到 1.0)
- editable - 定義用戶是否可編輯直線(true/false)
實(shí)例
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
});
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
嘗試一下 ?
Google 地圖 - 圓
圓支持以下屬性：
- center - 指定圓的中心點(diǎn)參數(shù) google.maps.LatLng
- radius - 指定圓的半徑，以米為單位
- strokeColor - 指定弧線的十六進(jìn)制顏色值(格式: "#FFFFFF")
- strokeOpacity - 指定弧線的透明度(該值為 0.0 到 1.0)
- strokeWeight -定義線的寬度,以像素為單位。
- fillColor - 指定圓的十六進(jìn)制顏色值填充值 (格式: "#FFFFFF")
- fillOpacity - 指定填充顏色的透明度 (該值為 0.0 到 1.0)
- 定義用戶是否可編輯直線(true/false)
實(shí)例
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
嘗試一下 ?
Google 地圖 - 信息窗口
在一個(gè)標(biāo)記上顯示一個(gè)文本信息窗口：
實(shí)例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
content:"Hello World!"
});
infowindow.open(map,marker);
嘗試一下 ?
Google 地圖 - 疊加層參考手冊
以上內(nèi)容是否對您有幫助：
更多建議：