如何使用JSON填充Google地圖標記？

Question

我想用這個的WebAPI（JSON）

我怎麼能顯示在谷歌地圖使用POSX &波西的標誌？

Answer 1

這很容易實現，你可能沒有嘗試過。以下是根據你的代碼json。

的Javascript：

<script>  

    //debugger; 
    var json; 
    //var json = JSON.parse('[{"PosID":12087,"TagID":11,"Tag":"","AssetID":14,"Asset":"","Driver":"","FixID":0,"Fix":"No Fix","Satellites":0,"PosX":-25.363882,"PosY":131.044922,"PosZ":59.0,"Speed":0.0,"Course":237.0,"HDOP":0.0,"Ignition":0,"Engine":"STOP","Mileage":8.0,"Battery":25.5,"Fuel":0.0,"LocID":0,"Location":"8 Tuas Avenue 18","ZoneID":0,"Zone":"","Remarks":null,"Timestamp":"2015-03-17T12:51:50","RxTime":"2015-03-17T12:51:50","Temperature":0.0,"Temperature2":0.0,"RFID":null,"FuelLevel":0.0,"ActualTemp":0.0,"IsBuffer":false},{"PosID":12088,"TagID":11,"Tag":"","AssetID":14,"Asset":"","Driver":"","FixID":0,"Fix":"No Fix","Satellites":0,"PosX":-25.363882,"PosY":141.044922,"PosZ":59.0,"Speed":0.0,"Course":237.0,"HDOP":0.0,"Ignition":0,"Engine":"STOP","Mileage":8.0,"Battery":25.5,"Fuel":0.0,"LocID":0,"Location":"8 Tuas Avenue 18","ZoneID":0,"Zone":"","Remarks":null,"Timestamp":"2015-03-17T12:51:50","RxTime":"2015-03-17T12:51:50","Temperature":0.0,"Temperature2":0.0,"RFID":null,"FuelLevel":0.0,"ActualTemp":0.0,"IsBuffer":false}]'); 

    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': "http://track.asiacom.co.th/fmswebapi/api/posinfo", 
     'type': "Get", 
     'dataType': "json", 
     'success': function (data) { 
      json = data; 
     } 
    }); 
    var m = []; 

    function initialize() { 
     var bounds = new google.maps.LatLngBounds(); 
     var infowindow = new google.maps.InfoWindow(); 
     var myLatlng = new google.maps.LatLng('103.639275', '1.3208363'); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 8 
      //mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     if (json.length > 0) { 
      $(json).each(function (i) { 
       var latlng = new google.maps.LatLng(json[i].PosX, json[i].PosY); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        title: json[i].Location      
       });     
       m.push(marker); 

       //extend the bounds to include each marker's position 
       bounds.extend(marker.position); 
      }); 
      //now fit the map to the newly inclusive bounds 
      map.fitBounds(bounds); 
     } 

    } 
    //google.maps.event.addDomListener(window, 'load', initialize); 
    $(document).ready(function(){ 
     initialize(); 
    }); 
</script> 

的Html

<div class="map-outer row">  
    <div id="map-canvas" class="map-view" style="height:700px; width:100%;">hello</div> 
</div> 

你必須包括以下JS也除了jQuery的庫。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 

Answer 2

var assets = (function() { 
var json = null; 
$.ajax({ 
    'async': false, 
    'global': false, 
    'url': "http://track.asiacom.co.th/fmswebapi/api/posinfo", 
    'type': "Get", 
    'dataType': "json", 
    'success': function (data) { 
     json = data; 
    } 
}); 
return json; 
alert("OK, data loaded"); 

}）;

• 事情是這樣的代碼