Erstellen Sie einen button, der zeigt meine aktuelle Position mit geolocation
Möchte ich eine Schaltfläche erstellen, die zeigt meinen aktuellen Standort über die geolocation. Hier ist mein code, die ich nahm aus der Entwickler-Seite.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
//Note: This example requires that you consent to location sharing when
//prompted by your browser. If you see a blank space instead of the map, this
//is probably because you have denied permission for location sharing.
var map;
function initialize() {
var mapOptions = {
zoom: 16
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
//Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map, chicago);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Fand ich einen Beitrag hier in diesen Foren sagen, um diesen code zu verwenden:
var myloc = new google.maps.Marker({
clickable: false,
icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
new google.maps.Size(22,22),
new google.maps.Point(0,18),
new google.maps.Point(11,11)),
shadow: null,
zIndex: 999,
map: //your google.maps.Map object
});
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
myloc.setPosition(me);
}, function(error) {
//...
});
Aber es scheint nicht zu funktionieren für mich. Ich weiß nicht, warum. Kann mir jemand versuchen zu erklären Sie mir und sagen Sie mir, wo ich den code für die arbeiten?
Ich würde eher ein "custom control", um zu zeigen, meine aktuelle position, wenn mir jemand helfen kann eins machen wie das, das Weg ich kann setzen es, wo immer ich will.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist ein einfach Beispiel, wie erstellen Sie ein benutzerdefiniertes Steuerelement und bindet einen click-Ereignis-listener, um es zu geolocate der Benutzer.
JSFiddle demo
geolocate()
am Ende derinitialize()
Funktion, wenn Sie wollen, dass es zentriert sein auf den ersten.