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 >