2014-05-11 128 views
0

我从我的XML文件谷歌地图半径围绕标记

标记我得到在XML文件中,我有一个距离,这是周围的标志半径,我试图让半径,但不知道如何告诉它使用距离为半径

我的地图HTML文件是遵循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> 

在其他地图我只不过是回应的距离,但是从XML拉是新的给我需要的距离为新的半径任何援助将不胜感激

+0

'半径:distance'应该足够 –

+0

如果我添加半径距离那只能说明一个标志,但仍然没有圈 –

+0

bindInfoWindow的号召显然被放置在错误的位置(在圈子里面)。 –

回答

0

属性通常是字符串,但半径预期为数字。

将它转换成一个数字:

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