地理定位和测量区域多边形

时间:2013-06-06 14:42:00

标签: javascript html google-maps google-maps-api-3

我在网站上有谷歌的teo地图。 第一张地图测量多边形的面积,第二张地图用于地理定位。

现在我只想映射一下来测量区域和地理位置。

代码:

<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&amp;ll=37.0625,-95.677068&amp;spn=37.136668,78.134766&amp;t=h&amp;z=4&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/?ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=37.136668,78.134766&amp;t=h&amp;z=4&amp;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>

在同一地图中加入该功能的任何想法?

此致

的Alessandro

0 个答案:

没有答案