データベースからGoogleマップに格納されたポリゴンを描画する方法

Question

角度のあるGoogleマップの場合、マップに保存されたマーカーのポリゴン配列を描画することができます。

私が使用している技術は次のとおりです。Angular version 1 with JavaScript、角度指示とtemplateUrlを使用しています。

これは私のHTMLディレクティブのテンプレートです：あなたが代わりにポリゴン座標の、データベース内でエンコードされた文字列としてあなたのポリゴンを格納する必要が

<ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true"> 

     <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonConfig.events"> 
     </ui-gmap-polygon> 

     <ui-gmap-markers models="compatiblePoints" coords="'self'" idKey="'id'" 
      options="pointsConfig.options" 
      clickable="true"> 
     </ui-gmap-markers> 

     <ui-gmap-drawing-manager options="config.drawing.options" static="true" control="drawingManagerControl" events="config.drawing.events"></ui-gmap-drawing-manager> 

    </ui-gmap-google-map> 

Answer 1

。次のようにエンコードされたポリゴンを得ることができ ：

/* This function save latitude and longitude to the polygons[] variable after we call it. */ 
    function encodePolygon(polygon) 
    { 
     //This variable gets all bounds of polygon. 
     var path = polygon.getPath(); 

     var encodeString = 
     google.maps.geometry.encoding.encodePath(path); 

     /* store encodeString in database */ 
    } 

を次にあなたが使用してエンコード文字列から任意の時間をあなたのポリゴンを再描画することができます

function DrawPolygon(encodedString){ 
    var decodedPolygon = 
    google.maps.geometry.encoding.decodePath(encodedString); 

      var polygon = new google.maps.Polygon({ 
       paths: decodedPolygon, 
       editable: false, 
       strokeColor: '#FFFF', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#FFFF', 
       fillOpacity: 0.35 
      }); 
}