2014-05-11 4 views
0

Je marqueurs que je reçois de mon fichier XMLGoogle Map Rayon autour de marqueur

Dans le fichier XML i ont une distance qui est le rayon autour du marqueur Je tente d'obtenir le rayon, mais ne savez pas comment dire que ce d'utiliser la distance que le rayon

Ma carte fichier HTML est le suivant map.html

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps AJAX + mySQL/PHP Example</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

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

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(-26.2615, 28.2037), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var infoWindow = new google.maps.InfoWindow(); 

     // Change this depending on the name of your PHP file 
     downloadUrl("map_xml.php", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var lbs_msisdn = markers[i].getAttribute("lbs_msisdn"); 
      var date_time = markers[i].getAttribute("date_time"); 
      var distance = markers[i].getAttribute("distance"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<b>" + lbs_msisdn + "</b> <br/>" + distance ; 
      var icon = customIcons['simple'] || {}; 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon, 
      shadow: icon.shadow 
     }); 
var cirlcle = new google.maps.Circle({ 
     strokeColor: "#00F", 
     strokeOpacity: 0.8, 
     strokeWeight: 1, 
     fillColor: "#00F", 
     fillOpacity: 0.10, 
    map: map, 
     center: point, 
    radius: <?php echo $distance?> // But cannot Echo in HTML so not sure how to get radius 
      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> 

Sur d'autres cartes que je viens Echo la distance, mais tirant de XML est nouveau pour moi besoin de la distance comme nouveau rayon toute aide serait appréciée

+0

'rayon: distance' devrait être suffisant –

+0

Si j'ajoute rayon: la distance, il ne montre qu'un seul marqueur, mais toujours pas de cercle –

+0

l'appel de bindInfoWindow est placé évidemment à une mauvaise position (à l'intérieur du cercle-création). –

Répondre

0

Les attributs sont généralement des chaînes, mais le rayon devrait être un nombre.

le convertir en un numéro:

var cirlcle = new google.maps.Circle({ 
       strokeColor : "#00F", 
       strokeOpacity : 0.8, 
       strokeWeight : 1, 
       fillColor  : "#00F", 
       fillOpacity : 0.10, 
       map   : map, 
       center  : point, 
       radius  : Math.round(distance) 
       }); 
Questions connexes