यहां अपने पृष्ठ के लिए पूरी तरह से काम कर रहे उदाहरण है। इस सरलीकृत संस्करण पर, आपके JSON API http://stream.dfwstormforce.com/test/api.php को हर 10 सेकंड में समय-समय पर लाया जाएगा, और योग्य डेटा (gpsStatus = true) मानचित्र पर प्रदर्शित किया जाएगा।
प्रदर्शित मार्कर आइकन streamStatus मान पर निर्भर करेगा।
<!doctype html>
<html>
<head>
<title>Google Map Test Page</title>
<style>
html, body, .map {
width: 100%;
height: 100%;
background-color: #eee;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = null;
var markers = [];
// Reload interval in milliseconds.
var reloadInterval = 10000;
var intervalId = window.setInterval(loadData, reloadInterval);
function initMap() {
var northTexasPosition = { lat: 32.836, lng: -96.995 };
map = new google.maps.Map(document.getElementById('map'), {
center: northTexasPosition,
zoom: 7,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
});
loadData();
}
// Load the markers data from API and display them on the map.
function loadData() {
$.getJSON('http://stream.dfwstormforce.com/test/api.php', function(responsedata) {
clearMarkers();
$.each(responsedata.streamers, function (key, item) {
item.lat = parseCoordinateNumber(item.lat);
item.lng = parseCoordinateNumber(item.lng);
item.gpsStatus = parseBoolean(item.gpsStatus);
item.streamStatus = parseBoolean(item.streamStatus);
if (shouldAddToMap(item)) {
addToMap(item);
}
});
});
}
// Clear all markers from the map.
function clearMarkers() {
$.each(markers, function (key, marker) {
marker.setMap(null);
});
markers = [];
}
// Add marker to the map.
function addToMap(item) {
var marker = new google.maps.Marker({
position: { lat: item.lat, lng: item.lng },
title: item.DisplayName + ', ' + item.ChaserLocation,
icon: getIcon(item.streamStatus),
map: map
});
markers.push(marker);
}
// Get the appropiate image url for marker icon.
function getIcon(streamStatus) {
if (! streamStatus) {
return 'http://stream.dfwstormforce.com/images/icons/streamOffline.png';
}
return 'http://stream.dfwstormforce.com/images/icons/streamOnline.png';
}
// Should we add the marker to the map?
function shouldAddToMap(item) {
if ($.type(item.lat) === 'null' || $.type(item.lng) === 'null') {
return false;
}
return item.gpsStatus === true;
}
// Parse coordinate number like 'W96.38188' to appropiate decimal value: -96.38188
// return null if it's invalid.
function parseCoordinateNumber(val) {
if ($.type(val) === 'number') {
return parseFloat(val);
}
if ($.type('val') !== 'string') {
return null;
}
val = val.trim();
if (val.length === 0) {
return null;
}
var directionPart = val.substr(0, 1).toUpperCase();
var valuePart = parseFloat(val.substring(1));
if ($.inArray(directionPart, ['N', 'E']) >= 0) {
return isNaN(valuePart) ? null : valuePart;
}
if ($.inArray(directionPart, ['S', 'W']) >= 0) {
return isNaN(valuePart) ? null : -valuePart;
}
val = parseFloat(val);
return isNaN(val) ? null : val;
}
// Parse boolean value.
function parseBoolean(val) {
if ($.type(val) === 'boolean') {
return val;
}
if (val === 1) {
return true;
}
if (val === 0) {
return false;
}
if ($.type('val') !== 'string') {
return null;
}
val = val.trim().toUpperCase();
if (val === 'TRUE') {
return true;
}
if (val === 'FALSE') {
return false;
}
return null;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async="defer"></script>
</body>
</html>
रूप @Dawood Awan से कहा, मुख्य समस्या अपने lat और lng डेटा एक डिग्री की दिशा (एन, एस, ई, डब्ल्यू) का इस्तेमाल किया है। आपको इन डेटा को दशमलव में एप्राइपिएट समन्वय मान में पार्स करना होगा। यहाँ मेरी कोड का हिस्सा है ऊपर है कि lat और lng पार्स जाएगा:
function parseCoordinateNumber(val) {
if ($.type(val) === 'number') {
return parseFloat(val);
}
if ($.type('val') !== 'string') {
return null;
}
val = val.trim();
if (val.length === 0) {
return null;
}
var directionPart = val.substr(0, 1).toUpperCase();
var valuePart = parseFloat(val.substring(1));
if ($.inArray(directionPart, ['N', 'E']) >= 0) {
return isNaN(valuePart) ? null : valuePart;
}
if ($.inArray(directionPart, ['S', 'W']) >= 0) {
return isNaN(valuePart) ? null : -valuePart;
}
val = parseFloat(val);
return isNaN(val) ? null : val;
}
यह या संख्या में निर्देशांक मान दिशा (N, S, E, या W) के साथ एक स्ट्रिंग की अनुमति देगा। मैंने सही अक्षांश या देशांतर सीमा को संभाला नहीं है, लेकिन आप इसे भी जोड़ सकते हैं। यदि दिया गया समन्वय अमान्य है तो फ़ंक्शन null लौटाएगा।
भी तुम्हारा साथ गूगल मैप्स एपीआई को बदलने के लिए मत भूलना:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async="defer"></script>
आशा इस यदि आपको मदद की!
सहायता के लिए धन्यवाद, हालांकि यह काम नहीं कर रहा है। मैं प्रतीक का नाम बदल लें शायद यह कम भ्रामक मैं पूरा किया और साथ ही उस जानकारी के साथ अपने मूल पोस्ट को अद्यतन करने के लिए कोशिश कर रहा हूँ के साथ बनाने के लिए। लिंक में कोड भी अपडेट किया गया है। कोई मार्कर प्लॉट नहीं किया जा रहा है और मुझे कंसोल में कोई त्रुटि नहीं मिल रही है। कोई सुझाव? मैं जेएस के साथ बिल्कुल अच्छा नहीं हूँ। मुझे पता है कि अगर मेरे पास जाने के लिए अच्छा आधार है तो मुझे चारों ओर पोक करने के लिए पर्याप्त जानकारी है। – Texan78