我正在全球旅行,需要在我的网页上插入显示我当前位置(而不是读者的位置)的谷歌地图,以便其他人可以看到我在哪里。
有没有人有一个简单的解决方案来做到这一点。我知道如何使用“我的地点”来创建地图并插入到我的页面中,但到目前为止,我还避免参与使用 Maps API。我对 HTML 和 Javascript 有一些了解,但它很少,所以如果可以的话,我宁愿避免这种情况。
有人对此有解决方案吗?
我正在全球旅行,需要在我的网页上插入显示我当前位置(而不是读者的位置)的谷歌地图,以便其他人可以看到我在哪里。
有没有人有一个简单的解决方案来做到这一点。我知道如何使用“我的地点”来创建地图并插入到我的页面中,但到目前为止,我还避免参与使用 Maps API。我对 HTML 和 Javascript 有一些了解,但它很少,所以如果可以的话,我宁愿避免这种情况。
有人对此有解决方案吗?
除了我对您的其他问题的回答之外,您可能会发现此示例的某些部分很有用:-hypoCampus
小蓝人/人/图标跟随您的位置。如果您滚动地图,您可以按下静态蓝色地图控制人员重新定位您的位置。当您移动时(节流位置更新正在更改),该图标正在行走,否则它处于站立状态。
(Manifest 有一个错误 - "display" : "standalone" at the mo Chrome bug)
希望 Firebase 致力于绕过 W3C/IETF 的速度障碍,并很快为我们提供 ServiceWorker 背景地理定位跟踪。
你必须告诉映射你当前的位置。为此,您必须获取您的位置纬度和经度,以便通过地图显示。
通过以下方式获得:
http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false
在您的页面中尝试此 html 代码。str_lat 和 str_lng 是您的位置:
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type='text/javascript' src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false>
</script>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(str_lat,str_lng);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:'Location!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas'/>
</body>
</html>;
请参阅此处 https://developers.google.com/maps/documentation/javascript/tutorial
并查看此代码以判断您的技能不要担心上面链接中解释的新术语
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>