Question

我正在检索纬度和来自mysql db的经度和绘制折线加入点。我的观点是我有不同类型的流量，即正常，低，中，高,,,折线颜色必须根据流量类型。例如，当db中的“type”为“high”时，折线必须为特定坐标显示红色，之后必须返回正常颜色，即; “绿色”。并且我无法做到这一点

<!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>

       <link href="AboutUs.css" rel="stylesheet" media="screen">

       <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUqr_f2oJMPNcy4JopcjLNQD9YkVQ7JUc"
        type="text/javascript"></script>
       <script type="text/javascript">
       //<![CDATA[

      var customIcons = {
      normal: {
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'
      },
      low: {
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png'
      },
      medium: {
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
      },
      high: {
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
      }
      };

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

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



    downloadUrl("phpsqlajax_genxml3.php", function(data) {  
      var xml = data.responseXML;
      var lat_lng = xml.documentElement.getElementsByTagName("marker");






      //Initialize the Path Array
      var path = new google.maps.MVCArray();

      //Initialize the Direction Service
      var service = new google.maps.DirectionsService();

      //Set the Path Stroke Color
      var poly = new google.maps.Polyline({ map: map, strokeColor: '#00ffff'});

      //Loop and Draw Path Route between the Points on MAP
      for (var i = 0; i < lat_lng.length; i++) {
        if ((i + 1) < lat_lng.length) {


            var src = new google.maps.LatLng(
                        parseFloat(lat_lng[i].getAttribute("lat")),
                        parseFloat(lat_lng[i].getAttribute("lng")));


            var des = new google.maps.LatLng(
                        parseFloat(lat_lng[i + 1].getAttribute("lat")),
                        parseFloat(lat_lng[i + 1].getAttribute("lng")));


            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                        poly.setPath(path);
                    }
                }
              });
          }
       }

     });


    }

    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>

<div id="main">
    <div id="header">
        <div id="logo">
            <img src="Images/Banner-TE.jpg" alt="Traffic Mgt Website">
        </div>
    </div>

    <div id="navbar">
       <div id="nav">
            <ul>  
                <li><a href="Home.html"><img src="Images/Home5.jpg"></a></li>


                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="Contact.html">Contact</a></li>
            </ul>
        </div>
    </div>



    <div id="content">
        <h3>Google Map</h3>



  <div id="map" style="width: 1024px; height: 1024px"></div>

这是我的数据库的图像

这是我的地图

Answer 1

您已使用多个Polyline，您可以使用.color()设置各自的颜色。请注意，color需要ARGB格式的int值

如何绘制多种颜色的折线

1 个答案: