Google maps API - 客户当前位置的中心地图
我已经查看了这个问题被问到的各种其他时间,但我不能完全指出我哪里出错了,这是我的代码:
I've looked at the various other times this question has been asked but I can't quite put a finger on where I'm going wrong, here's my code:
<html>
<head>
<title> Map </title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 800px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize()
{
var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050);
var mapOptions =
{
zoom: 10,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php
$sql = mysql_query("SELECT * FROM data ORDER BY ID DESC");
while($row =mysql_fetch_array($sql))
{
$desc = $row['DESCRIPTION'];
$location = $row['LOCATION'];
$counter += 1;
?>
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $location; ?>),
map: map,
title: '<?php echo $desc; ?>',
icon: '/image/cam.png'
});
navigator.geolocation.getCurrentPosition(showPosition);
}
var showPosition = function (position)
{
map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 16);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
它最初将中心设置为myLatlng1,而底部将其设置为用户当前位置的代码没有做任何事情,有什么想法吗?
It originally sets the center to myLatlng1, and the code at the bottom to set it to the user's current location doesn't do anything, any ideas?
提前致谢.
推荐答案
尝试使用以下代码获取用户当前位置(GEOLOCATION):
Try using the below code to get the user's current location (GEOLOCATION):
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
为了展示一个例子,我删除了你的 php 代码.检查这个 JSFiddle
For showing an example, I've removed your php code. Check this JSFiddle
希望你能理解.
相关文章