GoogleMap学习笔记.doc

Google Map API Version3 教程(一)：显示一个最基本的地图Google Map API Version3 教程1 实现一个地图：中引用：Html里面合适的位置定义：javascript文件:window.onload = myLoad;function myLoad() lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP ; var map = new google.maps.Map(document.getElementByIdx_x(map), myOptions);说明：zoom参数是地图的范围，参数越小，地图的范围就越大center是地图的中心点，通过经纬度定义mapTypeId：是地图的类型。有四种map可选，详见：/s/blog_4cdc44df0100u7zl.html 此时就可以显示中心点是（113，27）的地图了google提供了4种地图类型，下面看一下四种类型的效果：在定义google map的地图时候： lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP ; var map = new google.maps.Map(document.getElementByIdx_x_x_x(map), myOptions);Google Map API Version3 教程(二)：地图的类型mapTypeId这个参数有4个常量，分别对应4中地图类型：MapTypeId.ROADMAP效果如下：MapTypeId.SATELLITE效果如下： Google Map API Version3 教程(三)：代码添加和删除marker标记 (2011-05-31 16:36:24)转载标签： google map api 教程 marker分类： WEB编程Google Map API Version3 教程:在地图 通过代添加和删除mark标记 lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN ; var map = new google.maps.Map(document.getElementByIdx_x_x(map_canvas), myOptions); var marker = new google.maps.Marker( position: myLatLng, title: Hello World! ); marker.setMap(map); 或者直接这样定义一个marker： var marker = new google.maps.Marker( position: myLatLng, map: map, title: Hello World! ); 去掉marker的操作是： marker.setMap(null); 示例代码下载：/source/3331139MapTypeId.HYBRID效果如下：MapTypeId.TERRAIN效果如下：示例代码下载：/source/3331139Google Map API Version3 教程(四)：给marker标记加上自定义内容 (2011-06-01 11:07:27)转载标签： google map 自定义 marker it分类： WEB编程Google Map API Version3 中标记可以给marker加上任何自己的东西。效果如下：代码:首先还是定义一个marker： lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN ; var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x(map_canvas), myOptions); var marker = new google.maps.Marker( position: myLatLng, title: Hello World! ); marker.setMap(map); 然后给marker标记添加点击事件和自定义内容： var contentString = + + + 我的标签 + + 我的淘宝 + + ; var infowindow = new google.maps.InfoWindow( content: contentString ); google.maps.event.addListener(marker, click, function () infowindow.open(map, marker); );infowindow是google指定的现实内容的类，你用HTML代码初始化它就好了mapStyle是自己定义的样式，在这里可以使用网页的css样式表示例代码下载：/source/3331139Google Map API Version3 教程(五)：地图控件的自定义 (2011-06-01 11:20:25)转载标签： google map api 教程 控件 自定义分类： WEB编程Google Map提供了三种控件，也提供了多种定义控件的方法：navigationControl：mapTypeControl：scaleControl：具体定义的方式是： lat = 23.14746; lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = zoom: 15, center: myLatLng, disableDefaultUI: true, /取消默认的试图 navigationControl: true, /true表示显示控件 mapTypeControl: false, /false表示不显示控件 scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP ; var map = new google.maps.Map(document.getElementByIdx_x(map), myOptions);通过这样的定义可以让控件显示或者不显示了。空间也可以指定样式和位置，主要是通过修改Options实现： var myOptions = zoom: 15, center: myLatLng, disableDefaultUI: true, navigationControl: false, mapTypeControl: true, mapTypeControlOptions: style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_LEFT , scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP ;mapTypeControlOptions就是设定样式来，style是样式，google.maps.ControlPosition.TOP_LEFT是位置：导航控件（navigationControl）可显示为以下 style 选项之一：google.maps.NavigationControlStyle.SMALL，用于显示迷你缩放控件，其中仅限 和 按钮。此样式适用于移动设备。google.maps.NavigationControlStyle.ZOOM_PAN，用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。google.maps.NavigationControlStyle.ANDROID，用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。google.maps.NavigationControlStyle.DEFAULT，会根据地图的尺寸和运行地图的设备挑选合适的导航控件。MapType 控件可显示为以下 style 选项之一：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。可以定义的位置是：TOP 表示控件应沿着地图顶部中心放置。TOP_LEFT 表示控件应沿着地图顶部左侧放置，控件的任何子元素“流”向顶部中心。TOP_RIGHT 表示控件应沿着地图顶部右侧放置，控件的任何子元素“流”向顶部中心。BOTTOM 表示控件应沿着地图底部中心放置。BOTTOM_LEFT 表示控件应沿着地图底部左侧放置，控件的任何子元素“流”向底部中心。BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置，控件的任何子元素“流”向底部中心。LEFT 表示控件应沿着地图左侧放置，位于使用 TOP_LEFT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。RIGHT 表示控件应沿着地图右侧放置，位于使用 TOP_RIGHT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。示例代码下载：/source/3331139Google Map API Version3 教程(六)：定义路线和点击事件 (2011-06-01 14:25:20)转载标签： google map api 教程 点击 click分类： WEB编程你可以在Google Map添加你想添加的线，并且为线添加点击事件。效果如下：JS代码：window.onload = myLoad;var poly; /折线var infoWindowPoly; /折线显示的窗口var map; /地图function myLoad() lat = 23.14746; /位置固定，你也可以通过其他方法得到坐标 lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); /初始化一个坐标位置 var myOptions = zoom: 15, /缩放，数值越大地图显示的内容越具体 center: myLatLng, /地图中心点 mapTypeId: google.maps.MapTypeId.ROADMAP ; map = new google.maps.Map(document.getElementByIdx_x_x_x_x(map), myOptions); /根据option初始化地图 var flightPlanCoordinates = /添加一条线 new google.maps.LatLng(23.14746, 113.34175376), new google.maps.LatLng(23.144, 113.345), new google.maps.LatLng(23.149, 113.349), ; poly = new google.maps.Polyline( /定义线的样式 path: flightPlanCoordinates, strokeColor: #FF0000, strokeOpacity: 1.0, strokeWeight: 8 ); poly.setMap(map); /把线添加到地图 google.maps.event.addListener(poly, click, addLatLng); /为线添加点击事件 infoWindowPoly = new google.maps.InfoWindow(); /初始化线