การใช้งาน polyline และ polygon ใน google map api v3
01 December 2010ตัวอย่าง และโค้ดต่อไปนี้ เป็นการประยุกต์ใช้งาน google map v3 กับการสร้างเส้น polyline
และเส้น polygon
โดยในกรณีการสร้างเส้น polyline จะทำการนำค่า ของจุดที่กำหนดของเส้น polyline มาเก็บไว้ใน textarea ไว้ใช้งาน และมีการคำนวณระยะทางของเส้นทั้งหมด
ส่วนกรณีของการสร้างเส้น polygon จะทำการนำค่า ของจุดที่กำหนดของเส้น polygon มาเก็บไว้ใน textarea ไว้ใช้งาน และคำนวณหาความยาวของเส้นโดยรอบพื้นที่ รวมทั้งหาขนาดของพื้นที่ มีหน่วยเป็น ตารางเมตร
เนื้อหาในส่วนนี้เป็นการใช้งาน ที่ค่อนข้างซับซ้อน
และไม่ได้ทำการอธิบายในส่วนของรายละเอียดทั้งหมด
โดยได้แนวทางในการปรับแต่งเพิ่มเติมจาก
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html
ซึ่งเป็นการใช้งาน google map v2
ดาวน์โหลดไฟล์ตัวอย่างพร้อม icon ได้ที่
http://www.ninenik.com/download/googlemapv3.rar
ตัวอย่าง
โค้ดตัวอย่างทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01</title>
<style type="text/css">
html {
height: 100%
}
body {
height:100%;
margin:0;
padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
position:relative;
width:550px;
height:400px;
margin:auto;/* margin-top:100px;*/
}
#contain_map {
position:relative;
width:550px;
height:400px;
margin:auto;
margin-top:50px;
}
/* css ของส่วนการกำหนดจุดเริ่มต้น และปลายทาง */
#showDD {
position:absolute;
bottom:0px;
/* background-color:#000; */
color:#FFF;
}
#show_form_data {
margin:auto;
width:550px;
}
#hand_b {
width:31px;
height:31px;
cursor:pointer;
background-image: url(images/Bsu.png);
}
#hand_b.selected {
background-image: url(images/Bsd.png);
}
#placemark_b {
width:31px;
height:31px;
cursor:pointer;
background-image: url(images/Bmu.png);
}
#placemark_b.selected {
background-image: url(images/Bmd.png);
}
#line_b {
width:31px;
height:31px;
cursor:pointer;
background-image: url(images/Blu.png);
}
#line_b.selected {
background-image: url(images/Bld.png);
}
#shape_b {
width:31px;
height:31px;
cursor:pointer;
background-image: url(images/Bpu.png);
}
#shape_b.selected {
background-image: url(images/Bpd.png);
}
</style>
</head>
<body>
<div id="contain_map">
<div id="map_canvas"></div>
<div id="showDD">
<table>
<tr>
<td><div id="hand_b"
onclick="stopEditing()"/></td>
<td><div id="placemark_b"
onclick="placeMarker()"/></td>
<td><div id="line_b"
onclick="startLine()"/></td>
<td><div id="shape_b"
onclick="startShape()"/></td>
</tr>
</table>
</div>
</div>
<div id="show_form_data">
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
Path Array<br />
<textarea name="path_arr" id="path_arr" cols="70" rows="5"></textarea>
<br />
Distance<br />
<input name="distance" type="text" id="distance" value="" />
Km (หากเป็น poligon จะเป็นขนาดความยาวโดยรอบ)<br />
Area<br />
<input name="area_data" type="text" id="area_data" value="" />
m<sup>2</sup> (หาร 1000000 จะได้ เท่ากับหน่วย km<sup>2</sup>)<br />
<input type="submit" name="button" id="button" value="บันทึก" />
</form>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
/* ส่วนสำหรับการ random ค่าสีและ event */
var COLORS =[
["red", "#ff0000"],
["orange", "#ff8800"],
["green","#008000"],
["blue", "#000080"],
["purple", "#800080"]
];
var colorIndex_ = 0;
var listener;
/* ส่วนของการกำหนดค่า สำหรับคำนวณพื้นที่ */
var earthRadiusMeters=6367460.0;
var metersPerDegree=2.0*Math.PI*earthRadiusMeters/360.0;
var degreesPerRadian=180.0/Math.PI;
var radiansPerDegree=Math.PI/180.0;
var metersPerKm=1000.0;
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var poly;
var polygon;
var marker=[];
var Points=[];
function swap_class(buttonId) {
$("#hand_b").removeClass("selected");
$("#shape_b").removeClass("selected");
$("#line_b").removeClass("selected");
$("#placemark_b").removeClass("selected");
$("#"+buttonId).addClass("selected");
}
function stopEditing() {
swap_class("hand_b");
$("#path_arr").val("");
$("#distance").val("");
$("#area_data").val("");
if(listener!=undefined){
GGM.event.removeListener(listener);
}
if(poly!=undefined){
poly.setMap(null);
}
if(polygon!=undefined){
polygon.setMap(null);
}
if(marker.length>0){
for(i=0;i<marker.length;i++){
marker[i].setMap(null);
}
}
}
function getColor(named) {
return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}
function getIcon(color) {
var icon = new GIcon();
icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(15, 32);
return icon;
}
function startShape(){
swap_class("shape_b");
var color = getColor(true);
var polygonOptions = {
strokeColor: color,
geodesic:true,
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: color,
fillOpacity: 0.35
}
polygon = new GGM.Polygon(polygonOptions);
polygon.setMap(map);
startDrawing2(polygon,color);
}
function startLine() {
swap_class("line_b");
var color = getColor(true);
var polyOptions = {
strokeColor: color,
geodesic:true,
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new GGM.Polyline(polyOptions);
poly.setMap(map);
startDrawing(poly,color);
}
function startDrawing2(polygon,color){
var i=0;
Points=[];
if(listener!=undefined){
GGM.event.removeListener(listener);
}
listener=GGM.event.addListener(map, 'click', function(event){
var path = polygon.getPath();
path.push(event.latLng);
Points.push(event.latLng);
var data_path="";
var points='';
$.each(path.b,function(j,k){
data_path+=path.b[j].ra+","+path.b[j].sa+"\r\n";
points+=path.b[j].ra+","+path.b[j].sa+'|';
});
$("#path_arr").val(data_path);
$("#distance").val(polygon.inKm());
calculateArea(Points);
// Add a new marker at the new plotted point on the polyline.
var image="http://google.com/mapfiles/ms/micons/"+color+".png";
marker[i] = new GGM.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map,
icon: image
});
i++;
});
}
function calculateArea(points) {
if(points.length>2) {
var areaMeters2=PlanarPolygonAreaMeters2(points);
if(areaMeters2>1000000.0) areaMeters2=SphericalPolygonAreaMeters2(points);
$("#area_data").val(areaMeters2.toFixed(2));
}
}
function PlanarPolygonAreaMeters2(points) {
var a=0.0;
for(var i=0;i<points.length;++i)
{var j=(i+1)%points.length;
var xi=points[i].lng()*metersPerDegree*Math.cos(points[i].lat()*radiansPerDegree);
var yi=points[i].lat()*metersPerDegree;
var xj=points[j].lng()*metersPerDegree*Math.cos(points[j].lat()*radiansPerDegree);
var yj=points[j].lat()*metersPerDegree;
a+=xi*yj-xj*yi;}
return Math.abs(a/2.0);
}
function SphericalPolygonAreaMeters2(points) {
var totalAngle=0.0;
//alert(points[0]);
for(i=0;i<points.length;++i)
{var j=(i+1)%points.length;
var k=(i+2)%points.length;
totalAngle+=Angle(points[i],points[j],points[k]);}
var planarTotalAngle=(points.length-2)*180.0;
var sphericalExcess=totalAngle-planarTotalAngle;
if(sphericalExcess>420.0)
{totalAngle=points.length*360.0-totalAngle;
sphericalExcess=totalAngle-planarTotalAngle;}
else if(sphericalExcess>300.0&&sphericalExcess<420.0)
{sphericalExcess=Math.abs(360.0-sphericalExcess);}
return sphericalExcess*radiansPerDegree*earthRadiusMeters*earthRadiusMeters;
}
function Angle(p1,p2,p3) {
var bearing21=Bearing(p2,p1);
var bearing23=Bearing(p2,p3);
var angle=bearing21-bearing23;
if(angle<0.0) angle+=360.0;
return angle;
}
function Bearing(from,to) {
var lat1=from.lat()*radiansPerDegree;
var lon1=from.lng()*radiansPerDegree;
var lat2=to.lat()*radiansPerDegree;
var lon2=to.lng()*radiansPerDegree;
var angle=-Math.atan2(Math.sin(lon1-lon2)*Math.cos(lat2),Math.cos(lat1)*Math.sin(lat2)-Math.sin(lat1)*Math.cos(lat2)*Math.cos(lon1-lon2));
if(angle<0.0) angle+=Math.PI*2.0;
angle=angle*degreesPerRadian;
return angle;
}
function startDrawing(poly,color){
var i=0;
if(listener!=undefined){
GGM.event.removeListener(listener);
}
listener=GGM.event.addListener(map, 'click', function(event){
var path = poly.getPath();
path.push(event.latLng);
var data_path="";
$.each(path.b,function(j,k){
data_path+=path.b[j].ra+","+path.b[j].sa+"\r\n";
});
$("#path_arr").val(data_path);
$("#distance").val(poly.inKm());
// Add a new marker at the new plotted point on the polyline.
var image="http://google.com/mapfiles/ms/micons/"+color+".png";
marker[i] = new GGM.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map,
icon: image
});
i++;
});
}
function placeMarker() {
swap_class("placemark_b");
var i=0;
if(listener!=undefined){
GGM.event.removeListener(listener);
}
listener=GGM.event.addListener(map, 'click', function(event){
if(event.latLng){
var color = getColor(true);
var image="http://google.com/mapfiles/ms/micons/"+color+".png";
marker[i] = new GGM.Marker({
position: event.latLng,
map: map,
icon: image
});
i++;
}
});
}
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 15, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
GGM.LatLng.prototype.kmTo = function(a){
var e = Math, ra = e.PI/180;
var b = this.lat() * ra, c = a.lat() * ra, d = b - c;
var g = this.lng() * ra - a.lng() * ra;
var f = 2 * e.asin(e.sqrt(e.pow(e.sin(d/2), 2) + e.cos(b) * e.cos
(c) * e.pow(e.sin(g/2), 2)));
return f * 6378.137;
}
GGM.Polyline.prototype.inKm = function(n){
var a = this.getPath(n), len = a.getLength(), dist = 0;
for(var i=0; i<len-1; i++){
dist += a.getAt(i).kmTo(a.getAt(i+1));
}
return dist;
}
GGM.Polygon.prototype.inKm = function(n){
var a = this.getPath(n), len = a.getLength(), dist = 0;
var dist2=0;
for(var i=0; i<len-1; i++){
dist += a.getAt(i).kmTo(a.getAt(i+1));
}
dist2+=a.getAt(len-1).kmTo(a.getAt(0));
return dist+dist2;
}
}
$(function(){
// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
// v=3.2&sensor=false&language=th&callback=initialize
// v เวอร์ชัน่ 3.2
// sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
// language ภาษา th ,en เป็นต้น
// callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
$("<script/>", {
"type": "text/javascript",
src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 9070 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 4331 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบลำดับขั้น ตอนที่ 2 อ่าน 3543 13 Oct 08 คำสั่ง SQL ORDER BY อ่าน 9116 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 10982 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 8026 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 20166 25 Sep 08 ไม่ให้ทำการ คัดลอก ( Copy ) และ วาง ( Paste ) อ่าน 2775 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 5156 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 7931 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 2134 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 7018 22 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2 อ่าน 1723 13 Oct 10 สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map อ่าน 2554 04 Dec 09 จัดการ Directory สร้าง ลบ เปลี่ยนชื่อ กำหนด permission ผ่าน FTP function ด้วย PHP อ่าน 1672 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 1223 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 11027 25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 3482 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 7705 29 Mar 09 ทบทวนการตัดข้อความด้วย PHP อ่าน 5087