苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
阅读:7908回复:2

HTML5在页面上使用谷歌地图

楼主#
更多 发布于:2018-08-07 16:32
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);
苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
沙发#
发布于: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>
苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
板凳#
发布于:2018-08-07 16:33
游客


返回顶部