Question

我想使用此Web API（JSON）

如何使用PosX显示标记;谷歌地图上的PosY？

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>

除了jquery lib之外，你还必须包含js以下。

<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");

}）;

像这段代码

如何使用JSON填充谷歌地图标记？

2 个答案: