google map V3 笔记
google map javascript api v3
Version 3 of this API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.
1.一切都是围绕google.maps.Map这个地图对象设计
1).创建地图对象
var map = new google.maps.Map(node, mapOptions);
其中node是DOM对象, document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(23.445,111.334),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
2)地图对象参数选项
其中center, mapTypeId这两个属性是必须的
其他可选
2.地图事件
1).用户事件(比如click)
are propagated from the DOM to the Google Maps API. These events are separate and distinct from standard DOM events
2).地图对象状态改变事件
MVC state change notifications reflect changes in Maps API objects and are named using a property_changed convention
3)绑定事件
google.maps.event.addListener(MVC-object, 'event', callback);
例如:
[code=javascript]
google.maps.event.addListener(map, 'click', function(event){
alert(event.latLng);
});
注意MVC状态改变事件并没有传递类似event的参数,需要自己去getProperty();
3.地图控件Controls
1)内置控件
a.zoom control
b.pan control
c.scale control
d.mapType control
e.street view control
这些内置控制需要在地图选项里定义外观与可见性(mapOptions)
关闭默认的控件UI
mapOptions: disableDefaultUI=true;
关闭添加内置控件:
[code=javascript]
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean
}
2)定制Control: (相对地图位置不变)
a.css 元素样式
b.通过事件控制器与用户或map交互
c.Create a <div> element to hold the control and add this element to the Map's controls property.
[code=javascript]
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago)
});
Positioning Custom Controls:
var controlDiv = document.createElement('DIV');
var myControl = new MyControl(controlDiv);
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
4.Overlay (相对于地理位置不变)
与Control的区别是附在地图位置图层上
Overlays reflect objects that you "add" to the map to designate points, lines, areas, or collections of objects.
1)single location: marker, icon
2)lines on the map: polyline
3)Areas of arbitrary shape on the map: polygon
4)Map layers may be displayed using overlay map types
5)The info window is also a special kind of overlay for displaying content (usually text or images) within a popup balloon on top of a map at a given location
6)You may also implement your own custom overlays. These custom overlays implement the OverlayView interface
add overlay to map:
可以使用overlay的option中标记map对象
也可以使用setMap(map)
remove overlay from map:
setMap(null);//set map to null
这个时候并没有销毁overlay对象,只是不在map中显示而已,
如果确实要销毁overlay对象, set overlay itself to null;
程序员需要自己去管理自己的overlay的生命周期
5.Marker
标记一个location
markerOptions: latlng, map, animation, icon
6.Polyline
A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence.
Polyline Arrays
var path = poly.getPath() 返回MVCArray, 包含Latlng对象
path.push(latlng)
path.getAt(), path.insertAt(), path.removeAt()
GroundOverlay: 可以在overlay里放图片, polygon则不行
7.Info Window :提示层
创建了var info =InfoWindow(opts)对象后,
是不在地图上显示的,需要调用info.open(map, marker);
marker可选, 如果没有marker,则使用latlng属性的坐标
gmap version 2默认只有一个infowindow对象的, v3是可以创建多个infowindow对象了
8.Layers Overview
Layers are objects on the map that consist of one or more separate items, but are manipulated as a single unit.
The Maps API has several types of layers:
a.KmlLayer objects render KML and GeoRSS elements into a Maps API V3 tile overlay.
b.FusionTablesLayer objects render data contained in Google Fusion Tables.
c.The TrafficLayer object renders a layer depicting traffic conditions and overlays representing traffic.
d.The BicyclingLayer object renders a layer of bike paths and/or bicycle-specific overlays into a common layer.
9.地图服务services
geocoding, directions, elevation, street view, Maximum Zoom Imagery
1).Geocoding: address to latlng
var geocoder = new google.maps.Geocoder();
异步请求服务
[code=javascript]
geocoder.geocode({address:'guangdong'}, function(results, status){
});
2).Reverse Geocoding (Address Lookup)
同样使用geocoder调用远程服务
使用方式,返回格式等参考The Google Geocoding API
http://code.google.com/apis/maps/documentation/geocoding/index.html
