All geek questions in one place

Update mvcarray when moving marker

I am trying to figure out MVCArray () in google maps v3. As an example, I use code written by GeoJason. I attached the click event to the markers to get its LatLng position. It works well, but I need to update MVCArray on a new post if the marker is being dragged to a new location. This part puzzled me. Does anyone know how to do this, or can point me to a good resource that explains MVCArray's usage? (except coode docs, its not intended for beginners .. lol)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>GeoJason - Line Length and Polygon Area with Google Maps API v3 Demo</title>
<meta name="keywords" content="" />
<meta name="description" content="Demo of how to get Line Length and Polygon Area with Google Maps API v3" />
<link rel="stylesheet" type="text/css" href="style/default.css" />
<!-- Script -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
var map;
var markerImageDefault = new google.maps.MarkerImage('images/markers/measure-vertex.png',null, null, new google.maps.Point(5,5));
var markerImageHover = new google.maps.MarkerImage('images/markers/measure-vertex-hover.png',null, null, new google.maps.Point(8,8));
var measure = {
    ll:new google.maps.MVCArray(),
    markers:[],
    line:null,
    poly:null
};
function Init(){
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 15,
        center: new google.maps.LatLng(34.96762, -80.47372),
        mapTypeId: google.maps.MapTypeId.ROADMAP,

        /* Make the map cursor a crosshair so the user thinks they should click something */
        draggableCursor:'crosshair'

    });
    google.maps.event.addListener(map,'click',function(evt){
        measureAdd(evt.latLng);
    });
}
function measureAdd(ll){
    var marker = new google.maps.Marker({
        map:map,
        position:ll,
        draggable:true,

        /* Let the user know they can drag the markers to change shape */
        title:'Drag me to change the polygon\ shape',

        icon: markerImageDefault
    });

    var count = measure.ll.push(ll);
    var llIndex = count-1;
    if (count>2) /* We've got atleast 3 points, we can measure area */
        measureCalc();

    /* when dragging stops, and there are more than 2 points in our MVCArray, recalculate length and area measurements */
    google.maps.event.addListener(marker,'dragend',function(evt){
        if (measure.ll.getLength()>2)
            measureCalc();
    });

    /* when the user 'mouseover a marker change the image so they know something is different (it draggable) */
    google.maps.event.addListener(marker,'mouseover',function(evt){
        marker.setIcon(markerImageHover);
    });

    google.maps.event.addListener(marker,'mouseout',function(evt){
        marker.setIcon(markerImageDefault);
    });

    // This will allow us to click on the first element to close the polygon 
    google.maps.event.addListener(marker,'click',function(evt){
        //alert(ll + " : " + measure.markers[0].position);
        console.log(ll.LatLng);
        if(ll == measure.markers[0].position) // Only for the first item
        {
            alert("You clicked!");
        }
    });

    /* when we drag a marker it resets its respective LatLng value in an MVCArray. Since we're changing a value in an MVCArray, any lines or polygons on the map that reference this MVCArray also change shape ... Perfect! */
    google.maps.event.addListener(marker,'drag',function(evt){
        measure.ll.setAt(llIndex,evt.latLng);
    });

    measure.markers.push(marker);
    /*  find out of the user placed a marker at the end of the polygon. */

    if (measure.ll.getLength()>1){
        /* We've got 2 points, we can draw a line now */
        if (!measure.line){
            measure.line = new google.maps.Polyline({
                map:map,
                clickable:false,
                strokeColor:'#FF0000',
                strokeOpacity:0.5,
                strokeWeight:3,
                path:measure.ll
            });
        }
        if (measure.ll.getLength()>2){
            /* We've got 3 points, we can draw a polygon now */
            if (!measure.poly){
                measure.poly = new google.maps.Polygon({
                    clickable:false,
                    map:map,
                    fillOpacity:0.25,
                    strokeOpacity:0,
                    paths:measure.ll
                });
            }
        }
    }
}
function measureReset(){
    /* Remove Polygon */
    if (measure.poly) {
        measure.poly.setMap(null);
        measure.poly = null;
    }
    /* Remove Line */
    if (measure.line) {
        measure.line.setMap(null);
        measure.line = null;
    }
    /* remove all LatLngs from the MVCArray */
    while (measure.ll.getLength()>0) measure.ll.pop();
    /* remove all markers */
    for (i=0;i<measure.markers.length;i++){
        measure.markers[i].setMap(null);
    }
    $('#measure span').text('0');
}
function measureCalc(){
    var points='';
    measure.ll.forEach(function(latLng,ind){
        /* build a string of points in (x,y|x,y|x,y|x,y) format */
        points+=latLng.lng()+','+latLng.lat()+'|';
    });
    points=points.slice(0,points.length-1);

    /* send a getJSON request to our webserver to get length and area measurements */
    $.getJSON('http://api.geojason.info/v1/ws_geo_length_area.php?format=json&in_srid=4326&out_srid=2264&points='+points+'&callback=?',function(data){
        if (parseInt(data.total_rows)>0){

            /* calculate and inject values in their corresponding "span"s */
            //var length = parseFloat(data.rows[0].row.length);
            var area = parseFloat(data.rows[0].row.area);
            //$('#measure-area-sqft').text(area.toFixed(0));
            $('#measure-area-acres').text((area/43560).toFixed(3));
            //$('#measure-length-feet').text(length.toFixed(0));
            //$('#measure-length-meters').text((length*0.3048).toFixed(1));
        }
    });
}

</script>
</head>

<body onload="Init();">
<div id="header"><a href="http://geojason.info/">Home</a> - <a href="http://geojason.info/demos/">Back to Demos</a></div>
<h2>Line Length and Polygon Area with Google Maps API v3</h2>
<div id="map-canvas"></div>
<div id="content">
<p></p>
<div><input type="button" onclick="measureReset();" value="Clear Measure" /></div>
<div id="measure">
<div>Length: <span id="measure-length-feet">0</span>&nbsp;ft.</div>

<div>Length: <span id="measure-length-meters">0</span>&nbsp;met.</div>
<div>Area: <span id="measure-area-sqft">0</span>&nbsp;ft.&sup2</div>
<div>Area: <span id="measure-area-acres">0</span>&nbsp;ac.</div>
</div>
</div>


</body>
</html>
+3
source share

Source: https://habr.com/ru/post/1789047/

More articles:


All Articles