|
阅读：6795回复：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
|
|
