Kayıtlı çokgenimi veritabanından google haritaya nasıl çizebilirim?

Question

Açısal google haritalar için depolanmış çokgen işaretler dizilimini haritaya çizmemin mümkün olmasını istiyorum.

Kullandığım teknik şu şekildedir: Açısal yönergesi ve templateUrl kullanarak JavaScript içeren açısal sürüm 1.

Bu benim html direktifi şablonu şudur: yerine poligon koordinat, veritabanında şifreli dize olarak çokgeninizi saklamak gerekir

<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 */ 
    } 

Sonra kullanarak kodlamak dize herhangi bir zaman çokgeninizi yeniden çizmek: şu şekildedir: Eğer kodlanmış poligonu elde edebilirsiniz

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