Azzip UI - 典型页面:地图

定位 事件 标记 路线 内容 多边形

定位 basic

结构如下:

map1=new GMaps({
	div: '#basic-gmaps',
	lat: 39.94093461615393,
	lng: 116.35276731933597
});
							

事件 events

结构如下:

map2 = new GMaps({
	  div: '#events-gmaps',
	  zoom: 16,
	  lat: 39.94093461615393,
	  lng: 116.35276731933597,
	  click: function(e) {
	    alert('click');
	  },
	  dragend: function(e) {
	    alert('dragend');
	  }
});
							

标记 markers

结构如下:

map3=new GMaps({
  div: '#markers-gmaps',
  lat: 39.94093461615393,
  lng: 116.35276731933597
});

map3.addMarker({
  lat: 39.94093461615393,
  lng: 116.35276731933597,
  title: 'Lima',
  click: function(e) {
    alert('You clicked in this marker');
  }
})
							

路线 polylines

结构如下:

map4=new GMaps({
  div: '#polylines-gmaps',
  lat: -12.043333,
  lng: -77.028333
});
path = [[-12.044012922866312, -77.02470665341184], [-12.05449279282314, -77.03024273281858], [-12.055122327623378, -77.03039293652341], [-12.075917129727586, -77.02764635449216], [-12.07635776902266, -77.02792530422971], [-12.076819390363665, -77.02893381481931], [-12.088527520066453, -77.0241058385925], [-12.090814532191756, -77.02271108990476]];

map4.drawPolyline({
  path: path,
  strokeColor: '#131540',
  strokeOpacity: 0.6,
  strokeWeight: 6
});
							

内容 Overlays

结构如下:

map5=new GMaps({
  div: '#overlays-gmaps',
  lat: 39.94093461615393,
  lng: 116.35276731933597
});
  
map5.drawOverlay({
    lat: map5.getCenter().lat(),
    lng: map5.getCenter().lng(),
    content: '<div class="overlay">Lima<div class="overlay_arrow above"></div></div>',
    verticalAlign: 'top',
    horizontalAlign: 'center'
});
							

多边形 polygons

结构如下:

polygon = map6.drawPolygon({
	paths: paths,
	useGeoJSON: true,
	strokeColor: '#BBD8E9',
	strokeOpacity: 1,
	strokeWeight: 3,
	fillColor: '#BBD8E9',
	fillOpacity: 0.6
});