Les coordonnées géographiques de Google Maps ne fonctionnent pas

Question

J'essaie d'utiliser les coordonnées google maps à utiliser dans un flux XML pour un site tiers, ce qui devrait créer la carte elle-même. Im en utilisant l'URL http://maps.google.com/maps/geo?q=hong%20kong&output=json&oe=utf8&sensor=false (cliquer sur ce lien ne fonctionnera pas, mais copier et coller fait). Cela me donne les coordonnées de point 114.1094970 et 22.3964280. Si je mets ces coordonnées directement dans Google Maps, elles ne fonctionnent pas, alors qu'est-ce que je fais mal?

Mon code pour la fonction elle-même est la suivante, mais il semble être un problème inhérent google maps plutôt que mon code:

function getLatandLong($add) 
{ 
$url = 'http://maps.google.com/maps/geo?q='.urlencode($add).'&output=json&oe=utf8&sensor=false'; 
$data = @file_get_contents($url); 
$jsondata = json_decode($data,true); 


if(is_array($jsondata)&& $jsondata ['Status']['code'] == 200){ 
    $output['lat'] = $jsondata ['Placemark'][0]['Point']['coordinates'][0]; 
    $output['lng'] = $jsondata ['Placemark'][0]['Point']['coordinates'][1]; 
} 


    return $output; 
} 

Toute aide serait très apprécié!

Answer 1

Ces coordonnées sont correctes et fonctionnent dans Google Maps.

Je devine que c'est parce que vous les passez dans le mauvais ordre:
vous avez besoin de mettre la latitude de coordonnées d'abord, comme dans
22.396428 114.109497
pas
114.109497 22.396428

En effet, en regardant le extrait de code, les analyser de manière incorrecte: les données JSON ont d'abord la longitude et la seconde la latitude ... Le code devrait donc se lire:

$output['lat'] = $jsondata ['Placemark'][0]['Point']['coordinates'][1]; 
    $output['lng'] = $jsondata ['Placemark'][0]['Point']['coordinates'][0]; 

Answer 2

vous pouvez utiliser cet exemple de jquery application mobile en utilisant des cartes coordonnées géographiques google:

---

jsfiddle-google-maps-geo-coordinates

ou avec des images personnalisées ici: jsfiddle-google-map-with-images

la tête est:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<!--link rel="stylesheet" href="/Content/jquery-mobile-responsive.css" /--> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=true&language=en"></script> 
<script> 
    $(document).bind("mobileinit", function() { 
     $.mobile.ajaxEnabled = false; 
    }); 

    $(Start); 

    function Start() { 
     $("#google_map .ui-collapsible-heading").click(function() { 
      var locations = [ 
       ['<br/>Main Office', 31.590496, 34.561981, 4], 
       ['Sensor 16<br/>User Name: 16_DE-1R', 31.590595, 34.562980, 5], 
       ['Sensor 17<br/>User Name: 17_TEN-2MP', 31.590694, 34.563979, 3], 
       ['Sensor 18<br/>User Name: 18_TEN-2MP', 31.590793, 34.564978, 2], 
      ]; 

      var map = new google.maps.Map(document.getElementById('googleMap'), { 
       zoom: 17, 
       center: new google.maps.LatLng(31.590892, 34.561977), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var infowindow = new google.maps.InfoWindow(); 

      var marker, i; 

      for (i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][3], locations[i][2]), 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', (function (marker, i) { 
        return function() { 
         infowindow.setContent(locations[i][0]); 
         infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } 
     }); 
    } 
</script> 

et corps:

<div data-role="page" class="type-interior"> 
<div data-role="header" data-theme="a"> 
    <a data-icon="back" href="#" rel="external">Back</a> 
    <h1>Sensor</h1> 
</div> 
<div data-role="content"> 
    <div class="content-primary"> 
     <h2>Sensor: 16</h2> 
      <div data-role="collapsible-set"> 
       <div id="google_map" data-role='collapsible' data-collapsed=true data-theme="b" data-content-theme="d"> 
        <h1>Sensor Map</h1> 
        <div id="googleMap" style="width:100%; height:300px;"></div> 
       </div> 
      </div>  
     <ul data-role="listview" data-inset="true" data-theme="b"> 
      <li data-role="list-divider"></li>     
      <li><a href="#" rel="external">Configure Comm</a></li> 
      <li><a href="#" rel="external">Measurements</a></li> 
      <li><a href="#" rel="external">Users</a></li> 
     </ul> 
    </div> 
    <div class="content-secondary"> 
     <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> 
       <h3>More Options</h3> 
       <ul data-role="listview" data-theme="c" data-dividertheme="d"> 
        <li data-role="list-divider">Actions</li> 
        <li><a href="/Home/UserList?back=Index" rel="external">Add User</a></li> 
        <li><a href="#" rel="external">Edit Sensor</a></li> 
        <li><a href="#" rel="external">Delete Sensor</a></li> 
       </ul> 
     </div> 
    </div> 
</div> 
<div data-role="footer" data-theme="a"> 
    <h4>Mobile</h4> 
</div>