Question

您好我一直在研究这款实时GPS跟踪器，但我无法超越错误，我认为这与制作＆＃34; map＆＃34;全局变量。会发生什么，我正在使用通过ajax从xml文件加载并解析为数组的gps cordinates，但似乎我无法显示标记。

＆＃13;

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
    </style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Network Monitor</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      1: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      0: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

   //global array to store our markers
var markersArray = [];
var map = new google.maps.Map(document.getElementById("map"), {
            center : new google.maps.LatLng(37.80815648152641, 140.95355987548828),
            zoom : 13,
            mapTypeId : 'roadmap'
        });
var infoWindow = new google.maps.InfoWindow;



    function load() {
        

        // your first call to get & process inital data
	downloadUrl("nwmxml.php", processXML); 

    }

    function processXML(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        //clear markers before you start drawing new ones
        resetMarkers(markersArray)
        for(var i = 0; i < markers.length; i++) {
            var host = markers[i].getAttribute("host");
            var type = markers[i].getAttribute("active");
            var lastupdate = markers[i].getAttribute("lastupdate");
            var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
            var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map : map,
                position : point,
                icon : icon.icon,
                shadow : icon.shadow
            });
            //store marker object in a new array
            markersArray.push(marker);
            bindInfoWindow(marker, map, infoWindow, html);


        }
            // set timeout after you finished processing & displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one
            // only when the first one is completed.
            setTimeout(function() {
                downloadUrl("nwmxml.php", processXML(data));
            }, 5000);
    }

//clear existing markers from the map
function resetMarkers(arr){
    for (var i=0;i<arr.length; i++){
        arr[i].setMap(null);

    }
    //reset the main marker array for the next call
    arr=[];
}
    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
        });
    }

    function downloadUrl(url, callback) {
        var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

        request.onreadystatechange = function() {
            if(request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
            }
        };

        request.open('GET', url, true);
        request.send(null);
    }
    function doNothing() {}
	

    //]]>

  </script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 100%; height: 100%"></div>
  </body>

</html>

＆＃13;

我的php sid效果很好。有了这个回应。

＆＃13;

<?xml version='1.0' encoding='UTF-8'?><markers><marker host="192.168.1.1" lastupdate="2012-03-12 18:02:54" lat="37.805538" lng="140.967235" active="1"/><marker host="192.168.1.80" lastupdate="2012-03-09 15:02:03" lat="37.805450" lng="140.967224" active="0"/><marker host="192.168.1.2" lastupdate="2012-03-12 18:03:30" lat="37.805685" lng="140.967224" active="1"/><marker host="192.168.1.75" lastupdate="2012-03-12 18:05:14" lat="37.805685" lng="140.967150" active="0"/><marker host="192.168.1.67" lastupdate="2012-03-12 18:07:04" lat="37.805685" lng="140.966995" active="1"/></markers>

＆＃13;

但是在html方面我收到了这个错误

＆＃13;

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

＆＃13;

Answer 1

我使用此代码： -

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Network Monitor</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
//global array to store our markers
var markersArray = [];
var map;
var infoWindow;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng(37.80815648152641, 140.95355987548828),
zoom : 13,
mapTypeId : 'roadmap'
});
infoWindow = new google.maps.InfoWindow;
// your first call to get & process inital data
downloadUrl("nwmxml.php", processXML);
}
function processXML(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//clear markers before you start drawing new ones
resetMarkers(markersArray)
for(var i = 0; i < markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map : map,
position : point,
icon : icon.icon,
shadow : icon.shadow
});
//store marker object in a new array
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
// set timeout after you finished processing & displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one
// only when the first one is completed.
setTimeout(function() {
downloadUrl("nwmxml.php", processXML(data));
}, 5000);
}
//clear existing markers from the map
function resetMarkers(arr){
for (var i=0;i<arr.length; i++){
arr[i].setMap(null);
}
//reset the main marker array for the next call
arr=[];
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if(request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 100%; height: 100%"></div>
</body>
</html>

现在唯一的问题是它没有用这个错误更新位置： -

realtim...ng.html (line 102)
TypeError: callback is not a function
callback(request, request.status);

Answer 2

Google支持许多实时GPS跟踪系统。因此，您可以轻松跟踪孩子的位置，使用ADM查找智能手机以及其他可用于跟踪和获取设备或儿童位置的应用程序。 Mysecurekid提供了许多功能，允许家长控制并随时随地与孩子联系，并在孩子离开标记位置或进入危险位置时通知家长。在安全性和连接性方面，孩子 Best GPS tracker smartwatch 。

此处，GPS跟踪功能如下所述;

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!-- External storage for caching. -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- My Location -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- Maps API needs OpenGL ES 2.0. -->
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />
dependencies {
    // Google Play Services
    compile 'com.google.android.gms:play-services:3.2.65'
    // Support Library
    compile 'com.android.support:appcompat-v7:18.0.0'
}
<fragment

        class="com.google.android.gms.maps.SupportMapFragment"

        android:id="@+id/map"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

谷歌地图实时GPS跟踪器

2 个答案: