Javascript 浏览器中的当前位置标记（蓝色圆圈）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12712027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Current location marker in browser (blue circle)
提问by prcu
Possible Duplicate:
How to highlight a user's current location in google maps?
可能的重复：
如何在谷歌地图中突出显示用户的当前位置？
Is there any method to get blue circle marker in current location using javascript google maps api?
有没有什么方法可以使用javascript google maps api在当前位置获取蓝色圆圈标记？
回答by Chad Killingsworth
You can use the GeolocationMarker library. It is part of the Google Maps API Utility Library.
您可以使用GeolocationMarker 库。它是Google Maps API Utility Library 的一部分。
回答by Robot Woods
Use the navigator.geolocationapproach, and use a custom icon for your blue circle
使用该navigator.geolocation方法，并为您的蓝色圆圈使用自定义图标
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developers.google.com/maps/documentation/javascript/overlays#Icons
https://developers.google.com/maps/documentation/javascript/overlays#Icons
EDIT:
编辑：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps User Location</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
html, body, #map_canvas{width:100%;height:100%;}
</style>
</head>
<body onload="locate()">
<div id="map_canvas"></div>
</body>
<script>
var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
function locate(){
navigator.geolocation.getCurrentPosition(initialize,fail);
}
function initialize(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
}
function fail(){
alert('navigator.geolocation failed, may not be supported');
}
</script>
</html>
