HTML5在页面上使用谷歌地图

1.在页面上使用谷歌地图的步骤

 1）.在页面中导入Google map api 的脚本文件

 

< script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false" > < / script >

2).设定地图参数，设定方法如下：

var coords = position . coords ; // 设定地图参数，将用户的当前位置的经纬度设定为地图的中心点 var latlng = new google.maps.LatLng ( coords . latitude , coords . longitude ); var myOptions = { // 设定放大倍数 zoom : 14 , // 将地图中心点设定为指定的坐标点 center : latlng, // 指定地图类型 mapTypeId : google . maps . MapTypeId .ROADMAP }; 3）。在本例中，将用户当前位置的经纬度设定为页面打开是的谷歌地图的中心点。

创建地图，在页面中显示：

// 创建地图并在div中显示 var map1; map1 = new google.maps.Map ( document . getElementById ( "map" ), myOptions); 4）。在地图上创建标记：

var marker = new google.maps.Marker ({ position : latlng, map : map1 }); 5）.设置标注窗口并指定标注窗口注释文字，

var infowindow = new google.maps.InfoWindow ({ content : "当前位置" }); 6）.打开标注窗口

infowindow . open (map1, marker); 7).全部代码如下所示：

<! DOCTYPE html > < html lang = "en" > < head > < title > 使用谷歌地图 </ title > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false" > < / script > </ head > < body onload = "init()" > < div id = "map" style = "width:400px;height:400px;border:1px solid gray" ></ div > < script > function init () { // 获取当前地理位置 navigator . geolocation . getCurrentPosition ( function ( position ) { var coords = position . coords ; // 设定地图参数，将用户的当前位置的经纬度设定为地图的中心点 var latlng = new google.maps.LatLng ( coords . latitude , coords . longitude ); var myOptions = { // 设定放大倍数 zoom : 14 , // 将地图中心点设定为指定的坐标点 center : latlng, // 指定地图类型 mapTypeId : google . maps . MapTypeId .ROADMAP }; // 创建地图并在div中显示 var map1; map1 = new google.maps.Map ( document . getElementById ( "map" ), myOptions); // 在地图上创建标记 var marker = new google.maps.Marker ({ position : latlng, map : map1 }); // 设定标注窗口，并指定该窗口中的注释文字 var infowindow = new google.maps.InfoWindow ({ content : "当前位置" }); // 打开标注窗口 infowindow . open (map1, marker); }); } < / script > </ body > </ html >