Web サイトに Google のテオ マップがあります。最初のマップはポリゴンの面積を測定し、2 番目のマップはジオロケーション用です。
今、私はそれを1つだけマッピングして、エリアとジオロケーションを測定します.
コード：
<header>
<h1 class="entry-title">Line Length and Polygon Area With Google Maps API V3</h1>
<p class="meta">
<a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#spherical">geometry library</a> for the <a href="http://code.google.com/apis/maps/documentation/javascript/">Google Maps API</a>. For more information, check out the <a href="/2010/line-length-and-polygon-area-in-google-maps-api-v3">blog post</a> with details.</p>
<p>Click the map below to start drawing lines and polygons and to start measuring. Distance and area measurements are below the map as well as a link to reset the measurements.</p>-->
<div class="google-maps" id="map" style="height: 400px; position: relative; border: 1px solid #CCC;"></div>
<p>Lunghezza (Linea rossa): <span id="span-length">0</span> mt - Area (area grigia): <span id="span-area">0</span> mt² - <a href="javascript:measureReset();">Resetta misure</a></p>
<script src="http://geojason.info/javascripts/libs/jquery-1.6.4.min.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript">
var map;
// Create a meausure object to store our markers, MVCArrays, lines and polygons
var measure = {
mvcLine: new google.maps.MVCArray(),
mvcPolygon: new google.maps.MVCArray(),
mvcMarkers: new google.maps.MVCArray(),
line: null,
polygon: null
};
// When the document is ready, create the map and handle clicks on it
jQuery(document).ready(function() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(39.57592, -105.01476),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggableCursor: "crosshair" // Make the map cursor a crosshair so the user thinks they should click something
});
google.maps.event.addListener(map, "click", function(evt) {
// When the map is clicked, pass the LatLng obect to the measureAdd function
measureAdd(evt.latLng);
});
});
function measureAdd(latLng) {
// Add a draggable marker to the map where the user clicked
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("/images/demos/markers/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5))
});
// Add this LatLng to our line and polygon MVCArrays
// Objects added to these MVCArrays automatically update the line and polygon shapes on the map
measure.mvcLine.push(latLng);
measure.mvcPolygon.push(latLng);
// Push this marker to an MVCArray
// This way later we can loop through the array and remove them when measuring is done
measure.mvcMarkers.push(marker);
// Get the index position of the LatLng we just pushed into the MVCArray
// We'll need this later to update the MVCArray if the user moves the measure vertexes
var latLngIndex = measure.mvcLine.getLength() - 1;
// When the user mouses over the measure vertex markers, change shape and color to make it obvious they can be moved
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(new google.maps.MarkerImage("/images/demos/markers/measure-vertex-hover.png", new google.maps.Size(15, 15), new google.maps.Point(0, 0), new google.maps.Point(8, 8)));
});
// Change back to the default marker when the user mouses out
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(new google.maps.MarkerImage("/images/demos/markers/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5)));
});
// When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the
// LatLng at this position
google.maps.event.addListener(marker, "drag", function(evt) {
measure.mvcLine.setAt(latLngIndex, evt.latLng);
measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
});
// When dragging has ended and there is more than one vertex, measure length, area.
google.maps.event.addListener(marker, "dragend", function() {
if (measure.mvcLine.getLength() > 1) {
measureCalc();
}
});
// If there is more than one vertex on the line
if (measure.mvcLine.getLength() > 1) {
// If the line hasn't been created yet
if (!measure.line) {
// Create the line (google.maps.Polyline)
measure.line = new google.maps.Polyline({
map: map,
clickable: false,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3,
path:measure. mvcLine
});
}
// If there is more than two vertexes for a polygon
if (measure.mvcPolygon.getLength() > 2) {
// If the polygon hasn't been created yet
if (!measure.polygon) {
// Create the polygon (google.maps.Polygon)
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.25,
strokeOpacity: 0,
paths: measure.mvcPolygon
});
}
}
}
// If there's more than one vertex, measure length, area.
if (measure.mvcLine.getLength() > 1) {
measureCalc();
}
}
function measureCalc() {
// Use the Google Maps geometry library to measure the length of the line
var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());
jQuery("#span-length").text(length.toFixed(1))
// If we have a polygon (>2 vertexes inthe mvcPolygon MVCArray)
if (measure.mvcPolygon.getLength() > 2) {
// Use the Google Maps geometry library tomeasure the area of the polygon
var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
jQuery("#span-area").text(area.toFixed(1));
}
}
function measureReset() {
// If we have a polygon or a line, remove them from the map and set null
if (measure.polygon) {
measure.polygon.setMap(null);
measure.polygon = null;
}
if (measure.line) {
measure.line.setMap(null);
measure.line = null
}
// Empty the mvcLine and mvcPolygon MVCArrays
measure.mvcLine.clear();
measure.mvcPolygon.clear();
// Loop through the markers MVCArray and remove each from the map, then empty it
measure.mvcMarkers.forEach(function(elem, index) {
elem.setMap(null);
});
measure.mvcMarkers.clear();
jQuery("#span-length,#span-area").text(0);
}
</script>
====地理位置情報====
<a href ="#" id="get_location"> Get Location</a>
<div id="map">
<!--<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&ll=37.0625,-95.677068&spn=37.136668,78.134766&t=h&z=4&output=embed"></iframe><br /><small><a href="https://maps.google.com/?ie=UTF8&ll=37.0625,-95.677068&spn=37.136668,78.134766&t=h&z=4&source=embed" style="color:#0000FF;text-align:left">Visualizzazione ingrandita della mappa</a> </small>-->
<iframe id="google_map" width="900" height="900" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com?output=embed"></iframe>
</div>
<script src="js/geoPosition.js"></script>
<script>
var c = function(pos){
var lat = pos.coords.latitude,
long = pos.coords.longitude,
acc = pos.coords.accuracy,
coords = lat + ', ' + long;
document.getElementById('map').setAttribute('src', 'https://maps.google.com/?q=' + coords + '&z=60&output=embed');
}
<!--document.getElementById('map').setAttribute('src', 'https://maps.google.com/?q=' + coords + '&z=60&output=embed'); }-->
/*var e =function(error){
if (error.code ===1) {
alert('unable to get location');
}
if (error.code ===3) {
alert('too long');
}
}*/
document.getElementById('get_location').onclick = function() {
/*var success = function(pos){
var lat = pos.coords.latitude,
long = pos.coords.longitude,
coords = lat + ', ' + long;
alert(coords);
}
var error =function(){
alert('geolocation not supported');
}
if (geoPosition.init()) {
geoPosition.getCurrentPosition(success, error);
}*/
/*navigator.geolocation.getCurrentPosition(c, e, {
enableHighAccuranrcy: true,
timeout: 0
});*/
navigator.geolocation.getCurrentPosition(c);
return false;
}
</script>
</body>
</html>
同じマップで関数に参加するためのアイデアはありますか?
よろしく
アレッサンドロ