2016-01-01 8 views
-1

Я пытаюсь получить несколько маркеров из моего SQLGoogle Maps SQL несколько маркеров не отображающие

Мой файл XML рисует необходимую информацию, как просили и показано в следующей ссылке

http://e-track.biz/map/xml.php 

XML из ссылки :

<markers> 
<marker MSISDN="27827910119" Time="23:30:35" Date="2016-01-01" lat="-26.2716" lng="28.22" Radius="971"/> 
<marker MSISDN="27827910119" Time="07:31:41" Date="2015-11-05" lat="-26.3274" lng="28.2457" Radius="1460"/> 
<marker MSISDN="27827910119" Time="07:31:40" Date="2015-11-05" lat="-26.3274" lng="28.2457" Radius="1460"/> 
<marker MSISDN="27827910119" Time="10:13:01" Date="2015-10-09" lat="0" lng="0" Radius="0"/> 
<marker MSISDN="27827910119" Time="16:38:19" Date="2015-10-04" lat="0" lng="0" Radius="0"/> 
</markers> 

Проблема, как и большинство других, я вижу на сайте, что она не показывает маркеры для меня.

Вот мой HTML-файл, чтобы попытаться загрузить маркеры на карте, как показано

<!DOCTYPE html > 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>PHP/MySQL & Google Maps Example</title> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh0MbGxFVti1rJkypMgs8548dN4wr6oKY" 
     type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

var customIcons = { 
    restaurant: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
    }, 
    bar: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
    } 
}; 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(47.6145, -122.3418), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("xml.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var MSISDN = markers[i].getAttribute("lbs_msisdn"); 
     var Time = markers[i].getAttribute("lbs_time"); 
     var Radius = markers[i].getAttribute("distance"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + MSISDN + "</b> <br/>" + Time; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
} 

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: 500px; height: 300px"></div> 
     </body> 

</html> 

Я использую образец в Google Maps учебники Он показывает карту, но не помощь маркеры будут оценены

+0

[Ваши данные указаны в Johannesburg South Africa] (http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=http://www.geocodezip.com/xmlProxy060215.asp?http://e-track. biz/map/xml.php), центр карты находится в Сиэтле, штат Вашингтон. – geocodezip

+0

Я получаю ошибку javascript, когда я запускаю ваш код: 'Uncaught ReferenceError: type не определен' – geocodezip

ответ

1

Существует Javascript ошибка (Uncaught ReferenceError: type is not defined), порожденную этой строки кода:

var icon = customIcons[type] || {}; 

Если вы не хотите пользовательские иконки , Удалите эту строку и изменить определение ваших маркеров:

var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    }); 

(потому что icon не будет определен)

live example

фрагмент кода:

function load() { 
 
    var map = new google.maps.Map(document.getElementById("map"), { 
 
    center: new google.maps.LatLng(47.6145, -122.3418), 
 
    zoom: 13, 
 
    mapTypeId: 'roadmap' 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow; 
 

 
    // downloadUrl("SO_20160101.xml", function(data) { 
 
    var xml = parseXml(xmlData); // data.responseXML; 
 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < markers.length; i++) { 
 
    var MSISDN = markers[i].getAttribute("MSISDN"); 
 
    var Time = markers[i].getAttribute("Time"); 
 
    var Radius = markers[i].getAttribute("Radius"); 
 
    var point = new google.maps.LatLng(
 
     parseFloat(markers[i].getAttribute("lat")), 
 
     parseFloat(markers[i].getAttribute("lng"))); 
 
    bounds.extend(point); 
 
    var html = "<b>" + MSISDN + "</b> <br/>" + Time; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: point, 
 
     // icon: icon.icon 
 
    }); 
 
    bindInfoWindow(marker, map, infoWindow, html); 
 
    } 
 
    map.fitBounds(bounds); 
 
    // }); 
 
} 
 

 
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() {} 
 

 
function parseXml(str) { 
 
    if (window.ActiveXObject) { 
 
    var doc = new ActiveXObject('MicrosoftXMLDOM'); 
 
    doc.loadXML(str); 
 
    return doc; 
 
    } else if (window.DOMParser) { 
 
    return (new DOMParser()).parseFromString(str, 'text/xml'); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", load); 
 

 
var xmlData = '<markers><marker MSISDN="27827910119" Time="15:09:32" lat="-26.0" lng="28.0" Radius="3"/><marker MSISDN="27827910119" Time="19:07:32" lat="-26.2726" lng="28.2179" Radius="1206"/><marker MSISDN="27827910119" Time="19:08:56" lat="-26.2726" lng="28.2179" Radius="1206"/><marker MSISDN="27827910119" Time="19:21:29" lat="-26.2726" lng="28.2179" Radius="1206"/><marker MSISDN="27827910119" Time="21:58:13" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:01:43" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:02:07" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:02:42" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:13:15" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="20:19:30" lat="-26.2615" lng="28.2037" Radius="148"/></markers>';
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

+0

Отлично, что сработало, но теперь оно дает мне только первую строку моего XML, а не остальное, которое я фильтровал? –

+0

Я не знаю, что это значит, но это звучит как еще один вопрос. – geocodezip

Смежные вопросы