Google Maps Geometry와 포인트 기억하기

Question

건물 옥상에서 측정을 수행하기 위해 GeoPortal이라는 Google Maps Geometry 용 플러그인을 사용하고 있습니다.

내 응용 프로그램에 제대로 작동하는 플러그인이있어 입력 한 주소에서 동적으로 만들어진 이전 페이지의 경도 및 위도를 선택합니다.

내가 겪고있는 문제는 사람들이 응용 프로그램을 통해 앞뒤로 탐색 할 수 있어야한다는 것입니다. 즉, 영역 플롯을 기억해야하므로 다시 페이지를 탐색 할 때 다시 그리지 않아도됩니다. 지역마다. 예에서

나는 사람이 다시 페이지를 탐색 할 때이 플롯 레이아웃을 기억해야합니다

다음과 같이 내 코드는 다음과 같습니다

jQuery를

var map; var measure = { mvcLine: new google.maps.MVCArray(), mvcPolygon: new google.maps.MVCArray(), mvcMarkers: new google.maps.MVCArray(), line: null, polygon: null }; jQuery(document).ready(function() { map = new google.maps.Map(document.getElementById("map"), { zoom: 21, center: new google.maps.LatLng(51.502378,-0.114348), mapTypeId: google.maps.MapTypeId.HYBRID, draggableCursor: "crosshair" }); google.maps.event.addListener(map, "click", function(evt) { measureAdd(evt.latLng); }); }); function measureAdd(latLng) { var marker = new google.maps.Marker({ map: map, position: latLng, draggable: true, raiseOnDrag: false, title: "Drag me to change shape", icon: new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5)) }); measure.mvcLine.push(latLng); measure.mvcPolygon.push(latLng); measure.mvcMarkers.push(marker); var latLngIndex = measure.mvcLine.getLength() - 1; google.maps.event.addListener(marker, "mouseover", function() { marker.setIcon(new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex-hover.png", new google.maps.Size(15, 15), new google.maps.Point(0, 0), new google.maps.Point(8, 8))); }); google.maps.event.addListener(marker, "mouseout", function() { marker.setIcon(new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5))); }); google.maps.event.addListener(marker, "drag", function(evt) { measure.mvcLine.setAt(latLngIndex, evt.latLng); measure.mvcPolygon.setAt(latLngIndex, evt.latLng); }); google.maps.event.addListener(marker, "dragend", function() { if (measure.mvcLine.getLength() > 1) { measureCalc(); } }); if (measure.mvcLine.getLength() > 1) { if (!measure.line) { measure.line = new google.maps.Polyline({ map: map, clickable: false, strokeColor: "#FF0000", strokeOpacity: 1, strokeWeight: 3, path:measure. mvcLine }); } if (measure.mvcPolygon.getLength() > 2) { if (!measure.polygon) { measure.polygon = new google.maps.Polygon({ clickable: false, map: map, fillOpacity: 0.25, strokeOpacity: 0, paths: measure.mvcPolygon }); } } } if (measure.mvcLine.getLength() > 1) { measureCalc(); } } function measureCalc() { var length = google.maps.geometry.spherical.computeLength(measure.line.getPath()); jQuery("#span-length").text(length.toFixed(1)) if (measure.mvcPolygon.getLength() > 2) { var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath()); jQuery("#span-area").text(area.toFixed(1)); document.getElementById('RoofArea').value = area.toFixed(1); document.getElementById('submit').disabled = false; } } function measureReset() { if (measure.polygon) { measure.polygon.setMap(null); measure.polygon = null; } if (measure.line) { measure.line.setMap(null); measure.line = null } measure.mvcLine.clear(); measure.mvcPolygon.clear(); measure.mvcMarkers.forEach(function(elem, index) { elem.setMap(null); }); measure.mvcMarkers.clear(); jQuery("#span-length,#span-area").text(0); document.getElementById('submit').disabled = true; } 

HTML/CSS

<style> 
    #map { 
    width: 500px; 
    height: 400px; 
    margin: 0 auto; 
    border: 5px solid #2F4B9E; 
    } 
</style> 

<div> 
    <div id="map"></div> 
    <p>Length (red line): <span id="span-length">0</span> mt<br /> 
    Area (grey area): <span id="span-area">0</span> mt&sup2;<br /> 
    <a href="javascript:measureReset();">Reset Measure</a></p> 
</div> 

jsFiddle

Answer 1

는 사실, 내 자신의 질문에 대답했다. ColdFusion도 사용했습니다. measureAdd() 함수에서

는 I 바로 제 선언 하에서 상단에서 그때

<cfcomponent> 
    <cffunction name="setLatLon" access="remote"> 
    <cfargument name="theLat" type="any" required="yes"> 
    <cfargument name="theLon" type="any" required="yes"> 
    <cfif NOT IsDefined('SESSION.latLon')> 
     <cfset SESSION.latLon = ArrayNew(1)> 
    </cfif> 
    <cfset st = StructNew()> 
    <cfset st.theLat = theLat> 
    <cfset st.theLon = theLon> 
    <cfset ArrayAppend(SESSION.latLon, st)> 
    </cffunction> 
</cfcomponent> 

생성이 .cfc 게시 measure.mvcMarkers.push(marker);

var toJSON = JSON.stringify(latLng); 
var toOutput = $.parseJSON(toJSON); 

    $.ajax({ 
     type: "POST", 
     url: "panels_plot.cfc", 
     data: { 
      method: "setLatLon", 
      theLat: toOutput.$a, 
      theLon: toOutput.ab 
     }, 
     dataType: "json" 
    }); 

아래 코드 블록을 추가 map 인 경우이를 추가했습니다. cfloop

<cfif IsDefined('SESSION.latLon')> 
     <cfloop from="1" to="#ArrayLen(SESSION.latLon)#" index="i"> 
      <cfoutput> 
      var jsonObj = new google.maps.LatLng(#SESSION.latLon[i].theLat#, #SESSION.latLon[i].theLon#); 

      var marker#i# = new google.maps.Marker({ 
       map: map, 
       position: jsonObj, 
       draggable: true, 
       raiseOnDrag: false, 
       title: "Drag me to change shape", 
       icon: new google.maps.MarkerImage("../admin/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5)) 
      }); 

      measure.mvcLine.push(jsonObj); 
      measure.mvcPolygon.push(jsonObj); 

      measure.mvcMarkers.push(marker#i#); 

      var latLngIndex#i# = measure.mvcLine.getLength() - 1; 

      google.maps.event.addListener(marker#i#, "mouseover", function() { 
       marker#i#.setIcon(new google.maps.MarkerImage("../admin/measure-vertex-hover.png", new google.maps.Size(15, 15), new google.maps.Point(0, 0), new google.maps.Point(8, 8))); 
      }); 

      google.maps.event.addListener(marker#i#, "mouseout", function() { 
       marker#i#.setIcon(new google.maps.MarkerImage("../admin/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5))); 
      }); 

      google.maps.event.addListener(marker#i#, "drag", function(evt) { 
       measure.mvcLine.setAt(latLngIndex#i#, evt.latLng); 
       measure.mvcPolygon.setAt(latLngIndex#i#, evt.latLng); 

      }); 

      google.maps.event.addListener(marker#i#, "dragend", function() { 
       if (measure.mvcLine.getLength() > 1) { 
        measureCalc(); 
       } 
      }); 

      if (measure.mvcLine.getLength() > 1) { 

       if (!measure.line) { 

        measure.line = new google.maps.Polyline({ 
         map: map, 
         clickable: false, 

        }); 

       } 

       if (measure.mvcPolygon.getLength() > 2) { 

        if (!measure.polygon) { 

         measure.polygon = new google.maps.Polygon({ 
          clickable: false, 
          map: map, 
          strokeColor: "##FF0000", 
          strokeOpacity: 1, 
          strokeWeight: 3, 
          paths: measure.mvcPolygon 
         }); 

        } 

       } 

      } 

      if (measure.mvcLine.getLength() > 1) { 
       measureCalc(); 
      } 
      </cfoutput> 
     </cfloop> 
    </cfif> 

내 문제를 잘 정리 한 항목이 있습니다.

Answer 2

당신은 로그인 시스템을 생성하고 데이터베이스에 모든 것을 저장하지 않나요? 그렇게 할 수있는 능력이 없다면 HTML5의 로컬 저장소를 살펴볼 수 있습니다. 여기

는 튜토리얼 :이 질문을 폐쇄을 위해, 여기 내 솔루션을 게시합니다 있도록 http://diveintohtml5.info/storage.html