阅读:7978回复:2
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); |
|
沙发#
发布于:2018-08-07 16:33
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> |
|
板凳#
发布于:2018-08-07 16:33
|
|