sql >> データベース >  >> RDS >> Mysql

MySQLデータベースからGoogleMapsAPIv3で複数のポリゴンを描画する

    google.maps.Polygon パスプロパティは、google.maps.LatLngsの配列の配列を取ります。各サブディビジョンを独自の配列として処理し、それを個別のパスとして1つのポリゴンにプッシュするか、(以下のように)それぞれに新しいポリゴンを作成する必要があります。

        var subdivision = xml.getElementsByTagName("subdivision");
        for (var i = 0; i < subdivision.length; i++) {
            arr = [];
            var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
            for (var j=0; j < coordinates.length; j++) {
              arr.push( new google.maps.LatLng(
                    parseFloat(coordinates[j].getAttribute("lat")),
                    parseFloat(coordinates[j].getAttribute("lng"))
              ));
                
              bounds.extend(arr[arr.length-1])
            }
            polygons.push(new google.maps.Polygon({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
            polygons[polygons.length-1].setMap(map);
        }
    

    作業フィドル

    コードスニペット:

    function initialize() {
      var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(40, -117),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      var arr = new Array();
      var polygons = [];
      var bounds = new google.maps.LatLngBounds();
    
      // downloadUrl("subdivision-coordinates.php", function(data) {
      var xml = xmlParse(xmlString);
      var subdivision = xml.getElementsByTagName("subdivision");
      // alert(subdivision.length);
      for (var i = 0; i < subdivision.length; i++) {
        arr = [];
        var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
        for (var j = 0; j < coordinates.length; j++) {
          arr.push(new google.maps.LatLng(
            parseFloat(coordinates[j].getAttribute("lat")),
            parseFloat(coordinates[j].getAttribute("lng"))
          ));
    
          bounds.extend(arr[arr.length - 1])
        }
        polygons.push(new google.maps.Polygon({
          paths: arr,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        }));
        polygons[polygons.length - 1].setMap(map);
      }
      // });
      map.fitBounds(bounds);
    }
    var xmlString = '<subdivisions><subdivision name="Auburn Hills"><coord lat="39.00748" lng="-92.323222"/><coord lat="39.000843" lng="-92.323523"/><coord lat="39.000509" lng="-92.311592"/><coord lat="39.007513" lng="-92.311378"/><coord lat="39.00748" lng="-92.323222"/></subdivision><subdivision name="Vanderveen"><coord lat="38.994206" lng="-92.350645"/><coord lat="38.985033" lng="-92.351074"/><coord lat="38.984699" lng="-92.343092"/><coord lat="38.981163" lng="-92.342234"/><coord lat="38.984663" lng="-92.3335"/><coord lat="38.993472" lng="-92.333179"/><coord lat="38.994206" lng="-92.350645"/></subdivision><subdivisions>';
    
    /**
     * Parses the given XML string and returns the parsed document in a
     * DOM data structure. This function will return an empty DOM node if
     * XML parsing is not supported in this browser.
     * @param {string} str XML string.
     * @return {Element|Document} DOM.
     */
    function xmlParse(str) {
      if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      }
    
      if (typeof DOMParser != 'undefined') {
        return (new DOMParser()).parseFromString(str, 'text/xml');
      }
    
      return createElement('div', null);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    #map-canvas,
    body,
    html {
      height: 100%;
      width: 100%;
    }
    <script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <div id="map-canvas"></div>



    1. MySQLは複数の値に等しい場所を選択します

    2. ストアドプロシージャとアクセス許可-EXECUTEで十分ですか?

    3. 複数の列のBツリーインデックスはどのように見えますか?

    4. SQLiteとは何ですか?