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.

InformationsquelleAutor Peter | 2015-03-11
Schreibe einen Kommentar