使用Google Maps API在用户当前位置设置标记？ [英] Setting a marker at users current position with Google Maps API?
问题描述
我想在以下脚本中的用户当前位置设置一个标记。
任何人都可以提供正确的代码，实际上可以使用此脚本吗？
我尝试了一些Google文档，没有任何运气。
感谢
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var showPosition = function（position）{
var userLatLng = new google.maps.LatLng（position.coords.latitude，position.coords.longitude）;
//通过userLatLng完成您想要的任何操作。
}
navigator.geolocation.getCurrentPosition（showPosition）;
var directionDisplay;
var map;
函数initialize（）{
directionsDisplay = new google.maps.DirectionsRenderer（）;
var copenhagen = new google.maps.LatLng（55.6771,12.5704）;
var myOptions = {
zoom：12，
mapTypeId：google.maps.MapTypeId.ROADMAP，
center：copenhagen
}
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
directionsDisplay.setMap（map）;
}
var directionsService = new google.maps.DirectionsService（）;
函数calcRoute（）{
var start = document.getElementById（start）.value;
var end = document.getElementById（end）.value;
var distanceInput = document.getElementById（distance）;
var request = {
origin：start，
destination：end，
travelMode：google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
distanceInput.value = response.routes [0] .legs [0] .distance.value / 1000;
}
}）;
}
< / script>
< title>距离计算器< / title>
< style type =text / css>
body {
font-family：Helvetica，Arial;
}
#map_canvas {
height：50％;
}
< / style>
< / head>
< body>
< body onload =initialize（）>
输入您的位置和所需的目的地以计算距离< / p>
< div>
< p>
< label for =start>开始：< / label>
< input type =textname =startid =start/>< br />
< label for =end>结束：< / label>
< input type =textname =endid =end/>< br />
< input type =submitvalue =计算路线onclick =calcRoute（）/>
< / p>
< p>
< label for =distance>距离（km）：< / label>
< input type =textname =distanceid =distancereadonly =true/>
< / p>
< / div>
< div id =map_canvas>< / div>
< / body>
< / html>
您可以像使用HTML5那样使用地理位置功能试图，但你需要确保你在地图初始化之前不要求地理定位。因此，将您的调用移至 initialize（）函数的结尾处<
另外，您需要为用户的位置创建一个新标记，并将该地图分配给该标记：
var showPosition = function（position）{
var userLatLng = new google.maps.LatLng（position.coords.latitude，position.coords.longitude）;
//通过userLatLng完成您想要的任何操作。
var marker = new google.maps.Marker（{
position：userLatLng，
title：'Your Location'，
map：map
}）;
}
I want to set a marker at the users current position in the following script.
Can anyone supply me with the right code, that actually works with this script?
I have tried some from the Google documentation, without any luck.
THANKS
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
}
navigator.geolocation.getCurrentPosition(showPosition);
var directionDisplay;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var copenhagen = new google.maps.LatLng(55.6771, 12.5704);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: copenhagen
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
var directionsService = new google.maps.DirectionsService();
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});
}
</script>
<title>Distance Calculator</title>
<style type="text/css">
body {
font-family:Helvetica, Arial;
}
#map_canvas {
height: 50%;
}
</style>
</head>
<body>
<body onload="initialize()">
<p>Enter your location and desired destination to calculate the distance</p>
<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start" id="start" /><br />
<label for="end">End:</label>
<input type="text" name="end" id="end" /><br />
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>
<label for="distance">Distance (km): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
</body>
</html>
You can use the geolocation capability in HTML5 like you had attempted to, but you need to make sure that you don't ask for the geolocation before the map is initialized. So, move your call to navigator.geolocation.getCurrentPosition(showPosition); to the end of your initialize() function.
Also, you'll need to create a new marker for the user's position, and assign the map to that marker:
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
}
这篇关于使用Google Maps API在用户当前位置设置标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
