Google地图的半径不是从SQL绘制的

Question

I am trying to set a radius around my marker the radius is set in my SQL database and that radius should show around the marker this is my current code

<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: google.maps.MapTypeId.HYBRID
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("<?php echo $url; ?>", function(data) {
    var xml = 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("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")));
      bounds.extend(point);
      var html = "<b>" + MSISDN + "</b> <br/>" + Time;
      // var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        // icon: icon.icon
      });
      var cirlcle = new google.maps.Circle({
      strokeColor: "#00F",
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: "#00F",
      fillOpacity: 0.10,
      map: map,
      center: point,
      radius: 1*markers[i].getAttribute("distance")

});

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


</script>

I have updated the code with the multiply in it and still not receiving the circles around the marker

Answer 1

Your code generates a javascript error: InvalidValueError: setRadius: not a number, because the result of markers[i].getAttribute("distance") is a string, not a number. Use parseFloat, parseInt or multiply it by a number (1*markers[i].getAttribute("distance") to solve that.

Proof of concept fiddle

code snippet:

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();
  var radius = 0;
  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")));
    bounds.extend(point);
    var html = "<b>" + MSISDN + "</b> <br/>" + Time;
    var marker = new google.maps.Marker({
      map: map,
      position: point,
    });
    var circle = new google.maps.Circle({
      strokeColor: "#00F",
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: "#00F",
      fillOpacity: 0.10,
      map: map,
      center: point,
      radius: 1 * markers[i].getAttribute("distance")
    });
    if (circle.getRadius() > radius) {
      radius = circle.getRadius();
      map.fitBounds(circle.getBounds());
    }  
    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 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 lbs_msisdn="27827910119" lbs_time="15:09:32" lat="-26.0" lng="28.0" distance="300"/><marker lbs_msisdn="27827910119" lbs_time="19:07:32" lat="-26.2726" lng="28.2179" distance="1206"/><marker lbs_msisdn="27827910119" lbs_time="19:08:56" lat="-26.2726" lng="28.2179" distance="1206"/><marker lbs_msisdn="27827910119" lbs_time="19:21:29" lat="-26.2726" lng="28.2179" distance="1206"/><marker lbs_msisdn="27827910119" lbs_time="21:58:13" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="22:01:43" lat="-26.2615" lng="28.2037" v="148"/><marker lbs_msisdn="27827910119" lbs_time="22:02:07" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="22:02:42" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="22:13:15" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="20:19:30" lat="-26.2615" lng="28.2037" distance="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>

</div>