谷歌地图 api 中心在我的位置上有一个按钮
Posted
技术标签:
【中文标题】谷歌地图 api 中心在我的位置上有一个按钮【英文标题】：google maps api center on my location with a button 【发布时间】：2014-11-28 15:33:53 【问题描述】：一切正常，但我真的很喜欢最后一个按钮（GPS）（抱歉无法发布图片） 将地图以用户位置为中心，而不是像我目前设置的那样仅刷新地图。
这个工作原理的一个例子是，用户打开网页并在地图上滚动，可能会更改为卫星视图，然后能够点击上面的按钮（或任何按钮）并获得地图平移回他们的位置。不确定这是否可能，但我似乎无法自己弄清楚。很感谢任何形式的帮助。这是我的弗兰肯斯坦地图的链接。 http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch-ski-map-mobile.htm
var map, GeoMarker;
function toggleLayer(this_layer)
if(this_layer.getMap())
this_layer.setMap(null)
else
this_layer.setMap(map);
function initialize()
var mapOptions =
zoom: 20,
center: new google.maps.LatLng(40.563855, -111.675426),
mapTypeId: google.maps.MapTypeId.TERRAIN
;
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions(fillColor: '#808080');
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function()
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
);
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e)
alert('There was an error obtaining your position. Message: ' + e.message);
);
GeoMarker.setMap(map);
trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
layer1 = new google.maps.FusionTablesLayer(
map: map,
heatmap: enabled: false ,
query:
select: "skilines",
from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
where: ""
,
options:
styleId: 2,
templateId: 2
);
layer2 = new google.maps.FusionTablesLayer(
map: map,
heatmap: enabled: false ,
query:
select: "resorts",
from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
where: ""
,
options:
styleId: 2,
templateId: 2
);
layer3 = new google.maps.FusionTablesLayer(
map: map,
heatmap: enabled: false ,
query:
select: "summerhiking",
from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
where: ""
,
options:
styleId: 2,
templateId: 2
);
layer4 = new google.maps.KmlLayer('URL-to-KML.kml',
suppressInfoWindows: false,
map: map,
preserveViewport: true
);
google.maps.event.addDomListener(window, 'load', initialize);
if(!navigator.geolocation)
alert('Your browser does not support geolocation');
//]]>
</script>
<title>Wasatch Map by deepfrogphoto</title>
</head>
<body>
<b>Wasatch Map by deepfrogphoto -</b>
<form>
<button onclick="myFunction()">Center Map on My Location</button>
</form>
<div id="map_canvas"></div>
</body>
【问题讨论】：
请在您的问题中发布（相关）代码。一旦你的页面被“修复”，你的问题将不再有上下文。 您知道坐标还是希望它自动检测任何用户位置？ 对不起，就像我在这里说的很菜鸟一样。我不确定相关代码是什么......这在我的脑海中都是相关的，因为一点点错误就会把它搞砸。我认为人们可以查看我的页面链接，获取代码，并按照我发布问题的方式帮助我解决问题.. 【参考方案1】：添加一个带有 onclick 事件监听器的按钮
<button onclick="myFunction()">Center</button>
然后创建 myFunction 以将地图居中到用户位置
function myFunction()
Map.panTo(UserCords);//UserCords = user current latitude, longitude. I suppose you have them!!!
编辑
function myFunction()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(getPosition,showError);
else
alert("Geolocation is not supported by this browser.");
function getPosition(position)
UserLatitude = position.coords.latitude;
UserLongitude = position.coords.longitude;
showPosition(UserLatitude, UserLongitude);
function showPosition(userLatitude, userLongitude)
lat= userLatitude;
lon= userLongitude;
latlon=new google.maps.LatLng(lat, lon);
YourMap.panTo(latlon);
function showError(error)
switch(error.code)
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.")
break;
case error.TIMEOUT:
alert("The request to get user location timed out.")
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.")
break;
【讨论】：
谢谢，这似乎是我需要的，但我不知道你所说的“我想你有它们”是什么意思......当我的页面加载时，我有地理位置（蓝点）工作，但不确定这些 UserCords... 它对你有用吗？我的意思是 e.x UserCords = new google.maps.LatLng(40.563855, -111.675426) 还没有...我添加了按钮代码...并且可以看到...并添加了功能代码，但它对我不起作用....它可能是我放的地方，或者UserCords ..也许我没有它们..或者它们被称为别的东西？ 检查我的编辑并复制粘贴代码并使用您的地图名称更改 YourMap（正如我在您的源代码中看到的，您的地图名称是“地图”）。所以用地图改变Yourmap，它必须玩！ 哇，我真的很感谢你在这方面的帮助.. 虽然我仍然无法让它工作。我已经尝试将上面的功能代码编辑添加到我的代码中，但我没有像以前那样收到错误，但它仍然对我不起作用..按钮没有做任何事情......是吗为你工作？？你能给我一个完整的例子，所以我不质疑在哪里添加你的代码。以上是关于谷歌地图 api 中心在我的位置上有一个按钮的主要内容，如果未能解决你的问题，请参考以下文章