使用地理定位在HTML谷歌地图地图

我是HTML新手，我正在尝试学习地理定位。我有一个地图使用HTML的谷歌地图插件(W3Schools教程谷歌地图)，显示在整个屏幕上，目前在我设置的位置(lat: 0, lng: 0)添加了一个标记。我简要地阅读了地理定位，并想知道是否有任何方法我可以使用地理定位，使标记位于用户访问网站的位置。我知道我可以用"位置坐标"。"纬度"one_answers"位置"坐标。但是当我将"var position =[0,0];"中的0替换为这些线时，地图根本不呈现。我知道在使用"position.coord"之前我可能需要添加一些内容。"纬度"one_answers"位置"坐标。经度"，但我不知道是什么，所以我把我所有的代码放在下面(但替换了所有的个人信息，除了我的名字，用#)。我不懂PHP/SQL，只是以防万一我需要一个服务器来访问用户的位置。

<!doctype html>
<html>
<head>
<title>Beck Rivera - Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var position = [0, 0];
function showGoogleMaps() {
    var latLng = new google.maps.LatLng(position[0], position[1]);
    var mapOptions = {
        zoom: 16,
        streetViewControl: false,
		panControl: false,
		zoomControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng,
	};
    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
	marker.setMap(map);
	var infowindow = new google.maps.InfoWindow({
		content:"<b>Wishnick Hall</b><br />Illinois Institute of Technology<br />Chicago, IL 60616"
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>
</head>
<body class="main">
<div id="googlemaps"></div>
<div class="navbar-wrapper">
<div class="contain">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" style="padding:7px;text-align:left;margin-left:-20px;margin-right:7px" href="Home.html"><img style="float:left;padding-left:15px" src="C:Program Files (x86)Notepad++Beck RiveraImagesLogo(s)BR.png" alt="Logo" width="44" height="35"></a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#<span class="badge">New</span></a></li>
<li class="active"><a href="#">#<span class="badge">New</span></a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<h1>Where Am I Right Now?</h1>
</body>
</html>

尝试使用导航器，地理定位并获得当前位置。这个函数会返回你的位置

navigator.geolocation.getCurrentPosition(function (pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });
    });

相关内容

最新更新

热门标签：