3
私はMVCArray（）をgoogle maps v3で見つけようとしています。 GeoJasonによって書かれたコードを例として使っています。 LatLngの位置を取得するためにマーカーにクリックイベントを添付しました。それはうまく動作しますが、マーカーが新しい場所にドラッグされた場合、新しい位置でMVCArrayを更新する必要があります。この部分は私が困惑している..誰もこれを行う方法を知っているか、MVCArrayを使用して説明する良いリソースに私を指すことができますか？mvcarray on marker move
<!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\'s 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's a marker change the image so they know something is different (it's 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> ft.</div>
<div>Length: <span id="measure-length-meters">0</span> met.</div>
<div>Area: <span id="measure-area-sqft">0</span> ft.²</div>
<div>Area: <span id="measure-area-acres">0</span> ac.</div>
</div>
</div>
</body>
</html>
私はdrawinていますgポリゴン..マーカーを使用してポリゴンを編集することができます。 – Dennis
この場合、最良の方法はbindToメソッドを使用して各頂点にマーカーを付けることです。http：//gmaps-utility-gis.googlecodeを参照してください。 com/svn/trunk/v3test/mvc/poly_bind.htmlの例またはここhttp://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.htmlまたはここhttp： /gmaps-samples-v3.googlecode.com/svn/trunk/rectangle-overlay/rectangle-overlay.html – Michal