可能重复:
如何在谷歌地图中突出显示用户的当前位置?
有没有使用javascript google maps api在当前位置获取蓝色圆圈标记的方法?
可能重复:
如何在谷歌地图中突出显示用户的当前位置?
有没有使用javascript google maps api在当前位置获取蓝色圆圈标记的方法?
您可以使用GeolocationMarker 库。它是Google Maps API 实用程序库的一部分。
使用该navigator.geolocation
方法,并为您的蓝色圆圈使用自定义图标
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developers.google.com/maps/documentation/javascript/overlays#Icons
编辑:
<!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>