Javascript Google Maps API loading in Web Browser

问题:

I'm clueless as to why this won't run on my mobile browser but it will run on my PC browser, chrome to be exact.

Could any of you provide feedback.

Link to the server I'm testing this on:

54.172.35.180/chat/chatlist.php

<script type="text/javascript">

    function success(position) {

      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var myOptions = {
        zoom: 15,
        center: latlng,
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

      var marker = new google.maps.Marker({
          position: latlng, 
          map: map, 
          title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
      });
    }

    google.maps.event.addDomListener(window, 'load', navigator.geolocation.getCurrentPosition(success));

</script>

I originally just copied and pasted the code from the API site and it worked fine but as soon as I started pulling GPS data it stopped working on my mobile device's browser. Any help would be appreciated.

回答1:

navigator.geolocation.getCurrentPosition doesn't return a position. So you can't use that result as a parameter of addDomListener(window, ...

What it does, is send a request. When that request is ready, a callback is triggerd. In that callback you can trigger your function success() (I named it initialize).

---

Just to show what's going on. You can still choose if this is a good way to proceed. Feel free to rename, extend, ...

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize(position, accuracy) {
      var latlng = position || new google.maps.LatLng(50.45, 4.45);    // set your own default location.  This gets called if the parameters are left blank.
      var myOptions = {
        zoom: 15,
        center: latlng
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
      if (position) {
        var marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            title: "You are here! (at least within a " + accuracy + " meter radius)"
        });
      }
      else {
        // position of the user not found
      }
    }
    function locationFound(position) {
      initialize( 
        new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        position.coords.accuracy
      );
    }
    function locationNotFound() {
      initialize(null, null);
    }
    function page_loaded() {
      // the page is loaded, we can send a request to search for the location of the user
      navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
    }
    google.maps.event.addDomListener(window, 'load', page_loaded);
</script>
<style>
#map-canvas {
  width: 500px;
  height: 400px;
}
</style>
<div id="map-canvas"></div>

Probably it's a better idea to first load a map and set a default location. When the location is found, you change the center and set the marker. Notice now: if the location is not found, it takes quite a long time before locationNotFound is called