google maps v3 電子地圖測距
<title>google map api v3測距</title>
<link href="../../../App_Themes/Default/Default.css" rel="stylesheet" type="text/css" />
<link href="../../CustomTheme/Plugin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var map;
var polyline;
var polylinesArray = [];
//距離標記陣列
var lenArray = [];
var DefaultLat = 39.919249;
var DefaultLng = 116.464347;
var DefaultZoom = 15; //預設情況下的zoom
//地圖初始化
function MapInit(){
var singapoerCenter = new google.maps.LatLng(DefaultLat, DefaultLng); //設定中心位置
var myOptions = {
zoom: DefaultZoom,
center: singapoerCenter,
navigationControl: true,
scaleControl: true,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//為地圖的縮放事件提供
google.maps.event.addListener(map, 'zoom_changed', function() {
if (this.getZoom() < DefaultZoom) {
CreateMarker(DefaultLat, DefaultLng, DefaultZoom);
}
});
getDistance();
}
function CreateMarker(lat, lng, MyGoToCommunityZoom) {
var singapoerCenter = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: MyGoToCommunityZoom,
center: singapoerCenter,
navigationControl: true,
scaleControl: true,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map.setOptions(myOptions);
}
//距離
function getDistance(){
google.maps.event.addListener(map,"click",function(event){
addMarker(event.latLng);
});
}
//新增新標記
function addMarker(location){
if(lenArray.length==0){
var icon = "../../../App_Themes/Default/images/dd-start.png";
}else{
if(lenArray.length>=2){
marker.setMap(null);
}
var icon ="../../../App_Themes/Default/images/dd-end.png";
}
//標記選項
var myOptions = {
position : location,
draggable :true,
map : map,
icon : icon
};
marker = new google.maps.Marker(myOptions);
//雙擊
google.maps.event.addListener(marker,'click',function(){
lenArray.push(marker);
drawOverlay();
});
//拖動結束事件
google.maps.event.addListener(marker,'dragend',function(){
lenArray.push(marker);
drawOverlay();
});
lenArray.push(marker);
drawOverlay();
}
//畫出路徑覆蓋層
function drawOverlay(){
//路線陣列
var flightPlanCoordinates = [];
//
//將座標壓入路線陣列
if (lenArray) {
for (i in lenArray) {
flightPlanCoordinates.push(lenArray[i].getPosition());
}
}
//路徑選項
var myOptions = {
path : flightPlanCoordinates,
map : map,
strokeColor : "#FF0000",
strokeOpacity : 1.0,
strokeWeight : 2
};
polyline = new google.maps.Polyline(myOptions);
//清除原有折線路徑
if (polylinesArray) {
for (i in polylinesArray) {
polylinesArray[i].setMap(null);
}
polylinesArray = [];
}
polyline.setMap(map);
document.getElementById("sRes").innerHTML =(polyline.getLength()/1000).toFixed(3);
polylinesArray.push(polyline);
}
google.maps.LatLng.prototype.distanceFrom = function(latlng) {
var lat = [this.lat(), latlng.lat()]
var lng = [this.lng(), latlng.lng()] //var R = 6371; // km (change this constant to get miles)
var R = 6378137; // In meters
var dLat = (lat[1] - lat[0]) * Math.PI / 180;
var dLng = (lng[1] - lng[0]) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math.cos(lat[1] * Math.PI / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return Math.round(d);
}
google.maps.Marker.prototype.distanceFrom = function(marker) {
return this.getPosition().distanceFrom(marker.getPosition());
}
google.maps.Polyline.prototype.getLength = function() {
var d = 0;
var path = this.getPath();
var latlng;
for (var i = 0; i < path.getLength() - 1; i++) {
latlng = [path.getAt(i), path.getAt(i + 1)];
d += latlng[0].distanceFrom(latlng[1]);
}
return d;
}
// 刪除所有疊加物
function deleteOverlays() {
if (lenArray) {
for (i in lenArray) {
lenArray[i].setMap(null);
}
lenArray.length = 0;
}
//清除原有折線路徑
if (polylinesArray) {
for (i in polylinesArray) {
polylinesArray[i].setMap(null);
}
polylinesArray = [];
}
document.getElementById("sRes").innerHTML="0.000";
}
</script>
</head>
<body onload="MapInit()">
<div>
<div >
您所在的位置>電子地圖測距</div>
<div id="search_box" class="search_box">
<div id="busSearchBox">
<span id="Span1" style="margin-left: 30px;">點選地圖可跟蹤您要測量的路線.
<input type="button" id="delMarker" onclick="deleteOverlays();" value="清除標記" class="inputBtn" />
距離：<span id="sRes">0.000</span>km
</span>
</div>
</div>
<div id="map" style="width: 100%; height: 500px">
</div>
</div>
</body>
</html>