2012-10-25 40 views
0

我正在嘗試使用谷歌地圖座標在第三方網站的XML Feed中使用,它應該創建地圖本身。我使用網址http://maps.google.com/maps/geo?q=hong%20kong&output=json&oe=utf8&sensor=false(單擊此鏈接將不起作用,但複製和粘貼)。這給我點座標114.1094970和22.3964280。如果我將這些座標直接放入Google地圖中,那麼它們不起作用,那麼我做錯了什麼?谷歌地圖地理座標不起作用

我對本身的功能如下所示的代碼,但它似乎是與谷歌本身的問題映射,而不是我的代碼:

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; 
} 

任何幫助,將不勝感激!

回答

1

這些座標是正確的,可以在Google地圖中使用。

我猜這是因爲你在錯誤的順序將它們傳遞:
你需要把緯度第一個座標,如
22.396428 114.109497

114.109497 22.396428

事實上在看代碼片斷,您解析他們不正確:JSON數據有經度第一和緯度第二...代碼應閱讀:

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

呃,好哇。現在我感到很蠢。我發誓我曾嘗試過。謝謝:) – Chris

+0

我們每隔一段時間都會[覺得愚蠢] ;-)公平地說,在JSON數據中被確定爲香港的單一點可能並不完全代表城市本身。它位於香港島以北大約15公里處;我猜這點與香港特別行政區的中心位置相對應。 – mjv

0

你可以使用谷歌地圖的地理座標使用jQuery Mobile的應用程序的這個例子:


jsfiddle-google-maps-geo-coordinates

或者自定義圖像的位置:jsfiddle-google-map-with-images

頭是:

<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> 

and body:

<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>