แผนที่ Maps API () สร้าง
ตัวอย่าง
สร้างแผนที่ของ Google:
var map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);
ลองตัวเอง»
ความหมายและการใช้งาน
Map() คอนสตรัคสร้างแผนที่ใหม่ภายในองค์ประกอบ HTML ระบุ (ปกติ <div> องค์ประกอบ)
วากยสัมพันธ์
new google.maps.Map( HTMLElement , MapOptions )
ค่าพารามิเตอร์
พารามิเตอร์ | ลักษณะ |
---|
HTMLElement | ระบุในสิ่งที่องค์ประกอบ HTML จะนำแผนที่ |
MapOptions | MapOptions เพื่อเลือกวัตถุที่มีตัวแปรแผนที่เริ่มต้น / ตัวเลือก |
วิธีการของ Map()
Method |
Return Value |
Description |
fitBounds( LatLngBounds ) |
None |
Sets the viewport to contain the given bounds |
getBounds() |
LatLng,LatLng |
Returns the south-west latitude/longitude and the north-east latitude/longitude
of the current viewport |
getCenter() |
LatLng |
Returns the lat/lng of the center of the map |
getDiv() |
Node |
Returns a DOM object that contains the map |
getHeading() |
number |
Returns the compass heading of aerial imagery (for SATELLITE and HYBRID
map types) |
getMapTypeId() |
HYBRID
ROADMAP
SATELLITE
TERRAIN |
Returns the current map type |
getProjection() |
Projection |
Returns the current Projection |
getStreetView() |
StreetViewPanorama |
Returns the default StreetViewPanorama bound to the map |
getTilt() |
number |
Returns the angle of incidence for aerial imagery in degrees (for
SATELLITE and HYBRID map types) |
getZoom() |
number |
Returns the current zoom level of the map |
panBy( xnumber,ynumber ) |
None |
Changes the center of the map by the given distance in pixels |
panTo( LatLng ) |
None |
Changes the center of the map to the given LatLng |
panToBounds( LatLngBounds ) |
None |
Pans the map by the minimum amount necessary to contain the given
LatLngBounds |
setCenter( LatLng ) |
None |
|
setHeading( number ) |
None |
Sets the compass heading for aerial imagery measured in degrees from
cardinal direction North |
setMapTypeId( MapTypeId ) |
None |
Changes the kind of map to display |
setOptions( MapOptions ) |
None |
|
setStreetView( StreetViewPanorama ) |
None |
Binds a StreetViewPanorama to the map |
setTilt( number ) |
None |
Sets the angle of incidence for aerial imagery in degrees (for SATELLITE
and HYBRID map types) |
setZoom( number ) |
None |
|
คุณสมบัติของ Map()
Property |
Type |
Description |
controls |
Array.<MVCArray.<Node>> |
Additional controls to attach to the map |
mapTypes |
MapTypeRegistry |
A registry of MapType instances by string ID |
overlayMapTypes |
MVCArray.<MapType> |
Additional map types to overlay |
เหตุการณ์ Map()
Event |
Arguments |
Description |
bounds_changed |
None |
Fired when the viewport bounds have changed |
center_changed |
None |
Fired when the map center property changes |
click |
MouseEvent |
Fired when the user clicks on the map |
dblclick |
MouseEvent |
Fired when the user double-clicks on the map |
drag |
None |
Fired repeatedly while the user drags the map |
dragend |
None |
Fired when the user stops dragging the map |
dragstart |
None |
Fired when the user starts dragging the map |
heading_changed |
None |
Fired when the map heading property changes |
idle |
None |
Fired when the map becomes idle after panning or zooming |
maptypeid_changed |
None |
Fired when the mapTypeId property changes |
mousemove |
MouseEvent |
Fired whenever the user's mouse moves over the map container |
mouseout |
MouseEvent |
Fired when the user's mouse exits the map container |
mouseover |
MouseEvent |
Fired when the user's mouse enters the map container |
projection_changed |
None |
Fired when the projection has changed |
resize |
None |
Fired when the map (div) changes size |
rightclick |
MouseEvent |
Fired when the user right-clicks on the map |
tilesloaded |
None |
Fired when the visible tiles have finished loading |
tilt_changed |
None |
Fired when the map tilt property changes |
zoom_changed |
None |
Fired when the map zoom property changes |
ซ้อนทับ
Constructor/Object |
Description |
Marker |
Creates a marker. (Note that the position must be set for the marker to
display) |
MarkerOptions |
Options for rendering the marker |
MarkerImage |
A structure representing a Marker icon or shadow image |
MarkerShape |
Defines the marker shape to use in determination of a marker's clickable
region (type and coord) |
Animation |
Specifies animations that can be played on a marker (bounce or drop) |
InfoWindow |
Creates an info window |
InfoWindowOptions |
Options for rendering the info window |
Polyline |
Creates a polyline (contains path and stroke styles) |
PolylineOptions |
Options for rendering the polyline |
Polygon |
Creates a polygon (contains path and stroke+fill styles) |
PolygonOptions |
Options for rendering the polygon |
Rectangle |
Creates a rectangle (contains bounds and stroke+fill styles) |
RectangleOptions |
Options for rendering the rectangle |
Circle |
Creates a circle (contains center+radius and stroke+fill styles) |
CircleOptions |
Options for rendering the circle |
GroundOverlay |
|
GroundOverlayOptions |
|
OverlayView |
|
MapPanes |
|
MapCanvasProjection |
|
เหตุการณ์ที่เกิดขึ้น
Constructor/Object |
Description |
MapsEventListener |
It has no methods and no constructor. Its instances are returned from
addListener() , addDomListener() and are eventually passed back to
removeListener() |
event |
Adds/Removes/Trigger event listeners |
MouseEvent |
Returned from various mouse events on the map and overlays |
การควบคุม
Constructor/Object |
Description |
MapTypeControlOptions |
Holds options for modifying a control (position and style) |
MapTypeControlStyle |
Specifies what kind of map control to display (Drop-down menu or
buttons) |
OverviewMapControlOptions |
Options for rendering of the overview map control (opened or collapsed) |
PanControlOptions |
Options for rendering of the pan control (position) |
RotateControlOptions |
Options for rendering of the rotate control (position) |
ScaleControlOptions |
Options for rendering of the scale control (position and style) |
ScaleControlStyle |
Specifies what kind of scale control to display |
StreetViewControlOptions |
Options for rendering of the street view pegman control (position) |
ZoomControlOptions |
Options for rendering of the zoom control (position and style) |
ZoomControlStyle |
Specifies what kind of zoom control to display (large or small) |
ControlPosition |
Specifies the placement of controls on the map |