Create Layer on google map

There are five common google layers.

*google.maps.Marker;*google.maps.InfoWindow;*google.maps.PolyLine;*google.maps.Polygon;*google.maps.Circle;

1.Maker's properties:

  *position:LatLng; ==> position.

  *map: google.maps.Map; ==>this maker display on which map or use maker.setMap(map); {makert.setMap(null), which use to remove a marker from the map}

  *title: 'string';

  *draggable: false;

  *animation: google.maps.Animation.DROP;google.maps.Animation.BOUNCE; / marker.setAnimation();

  *label:'string' ==>A marker label is a single textual character that appears inside a marker;

  *icon:image;

  *shape:shape;

2.InfoWindow's properties: InfoWindow displays content(usually text or images) in a popup window above the map, at a given location; typically you will attach an info window to a marker, but you can also attach an info window to a specific latitude/longitude.

  *content:'string';

  *position:LatLng;

  *maxWidth:number;

  *Infowindow.close();close a info window.

  *move an info window: call setPosition() or infoWindow.open();

3.Polyline's properties: To draw a line on your map.

  *strokeColor: "#FFFFFF";

  *strokeOpacity: 0.0 to 1.0;

  *strokeWeight: number;

  *setMap(map); //setMap(null);==>remove a polyline

  *getPath(); ==>return polyline instance

  *push(latlng);

  *getLength();

  *customize a polyline: See Symbols.

3. Polygon's properties: represents an area enclosed by a closed path.

  *paths: triangleCoords;  var triangleCoords = [{lat: 25.774, lng: -80.190},{lat: 18.466, lng: -66.118},{lat: 32.321, lng: -64.757}];

  *strokeColor:'#FF0000';

  *strokeOpacity:0.8;

  *strokeWeight: number;

  *fillColor:'#0000FF';

  *fillOpacity:0.35;

  *setMap(map); //setMap(null);

  *getPath()

 4. Circle: center, strokeColor, strokeOpacity, strokeWeight, radius, fillColor, fillOpacity, editable.

===>

google.maps.event.addListener(marker,'click', nameoffunction);

or

marker.addListener('click',nameoffunction);

==>可以在UI事件里acquire到event的parameter

marker.addListener('click',function(e){});

posted on 2016-04-22 13:25  yeatschen  阅读(279)  评论(0编辑  收藏  举报

导航