1

我正在使用一个名为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

4

2 回答 2

0

您不应该创建一个登录系统并将所有内容存储在数据库中吗？如果您没有能力这样做，您可以查看 HTML5 的本地存储。

这是一个教程： http ://diveintohtml5.info/storage.html

于 2012-11-12T13:39:36.460 回答
0

我实际上回答了我自己的问题，所以为了结束这个问题，我将在这里发布我的解决方案。我也用过 ColdFusion。

在measureAdd()函数中，我在下面添加了这段代码 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"
    });

发布到我创建的这个 .cfc

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

然后，在第一个声明的顶部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>

这很好地解决了我的问题。

于 2012-11-14T11:12:59.627 回答