google map สำเร็จรูป แต่ อยากแก้ให้เป็น readonly ทำไงคับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา google map สำเร็จรูป แต่ อยากแก้ให้เป็น readonly ทำไงคับ
google map สำเร็จรูป แต่ อยากแก้ให้เป็น readonly ทำไงคับ
Copy
พี่คับ อยากให้แผนที่มัน มีลักษณะเดียวกับ readonly ทำยังไงคับ ไม่ต้องเลื่อน a เลื่อน b ไม่ต้องซูมได้ ทำยังไงคับ <style type="text/css"> /* css กำหนดความกว้าง ความสูงของแผนที่ */ #map_canvas { width: 600px; height: 400px; margin: auto; margin-top: 20px; } #directions-panel { font-size:small; width:600px; margin:auto; clear:both; background-color:#F1FEE9; } /* css ในส่วนข้อมูลการแนะนำเส้นทาง เพิ่มเติม ถ้าต้องการกำหนด */ .adp-placemark{ background-color:#9C3; } .adp-summary{ } .adp-directions{ } } </style> <div id="google_map"> <div id="map_canvas"></div> <div id="showDD" style="margin:auto; font-size:small;padding-top:5px;width:600px;"> <!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>--> From: <input name="namePlace" type="text" id="namePlace" size="30" value="งานกิจการนิสิต มหาวิทยาลัยเกษตรศาสตร์ วิิทยาเขตกำแพงแสน ตำบล กำแพงแสน จังหวัด นครปฐม 73140 ประเทศไทย" readonly="readonly" /> To: <input name="toPlace" type="text" id="toPlace" size="30" /> <br /> <input type="button" name="SearchPlace" id="SearchPlace" value="Search" /> <input type="button" name="iClear" id="iClear" value="Clear" /> <hr /> <!-- <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ--> From: <input name="namePlaceGet" type="text" id="namePlaceGet" size="30" /> To: <input name="toPlaceGet" type="text" id="toPlaceGet" size="30" /> <br /> <br /> เริ่มต้น <input name="a" type="text" id="a" size="30" readonly="readonly"/> <input type="hidden" name="a1" id="a1" /> <input type="hidden" name="a2" id="a2" /> ปลายทาง <input name="b" type="text" id="b" size="30" readonly="readonly"/> <input type="hidden" name="b1" id="b1" /> <input type="hidden" name="b2" id="b2" /> <br /> <br /> ระยะทาง <input name="distance_text" type="text" id="distance_text" value="" size="17" readonly="readonly" /> * ระยะทางโดยประมาณ <br /> <p id="myconsole"></p> <div id="directions-panel"></div> </div> <script type="text/javascript"> var directionsDisplay; var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้ function initialize() { // ฟังก์ชันแสดงแผนที่ directionsDisplay = new google.maps.DirectionsRenderer(); GGM = new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM directionShow = new GGM.DirectionsRenderer({ draggable: true }); directionsService = new GGM.DirectionsService(); // กำหนดจุดเริ่มต้นของแผนที่ my_Latlng = new GGM.LatLng(14.0278829, 99.98043610000002); // กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก initialTo = new GGM.LatLng(14.0278829, 99.98043610000002); var my_mapTypeId = GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj = $("#map_canvas")[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 13, // กำหนดขนาดการ zoom center: my_Latlng, // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng mapTypeId: my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId }; map = new GGM.Map(my_DivObj, myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directions-panel')); if (map) { // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว searchRoute(my_Latlng, initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง } // กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง GGM.event.addListener(directionShow, 'directions_changed', function () { var results = directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ // นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน var addressStart = results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น var addressEnd = results.routes[0].legs[0].end_address; // สถานที่ปลายทาง var distanceText = results.routes[0].legs[0].distance.text; // ระยะทางข้อความ //เมื่อมีการเลื่อนหมุด var startlatlng = results.routes[0].legs[0].start_location; var startlat = results.routes[0].legs[0].start_location.lat(); var startlng = results.routes[0].legs[0].start_location.lng(); var endlatlng = results.routes[0].legs[0].end_location; var endlat = results.routes[0].legs[0].end_location.lat(); var endlng = results.routes[0].legs[0].end_location.lng(); //เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด $("#a").val(startlatlng); $("#a1").val(startlat); $("#a2").val(startlng); $("#b").val(endlatlng); $("#b1").val(endlat); $("#b2").val(endlng); // นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ $("#namePlaceGet").val(addressStart); $("#toPlaceGet").val(addressEnd); $("#distance_text").val(distanceText); var request = { origin: startlatlng, destination: endlatlng, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); }); } $(function () { // ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง searchRoute = function (FromPlace, ToPlace) { // ฟังก์ชัน สำหรับการสร้างเส้นทาง if (!FromPlace && !ToPlace) { // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา var FromPlace = $("#namePlace").val(); // รับค่าชื่อสถานที่เริ่มต้น var ToPlace = $("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง } // กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล var request = { origin: FromPlace, // สถานที่เริ่มต้น destination: ToPlace, // สถานที่ปลายทาง travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์ }; // ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์ directionsService.route(request, function (results, status) { if (status == GGM.DirectionsStatus.OK) { // ถ้าสามารถค้นหา และสร้างเส้นทางได้ directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์ // นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน var addressStart = results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น var addressEnd = results.routes[0].legs[0].end_address; // สถานที่ปลายทาง var locaStart = results.routes[0].legs[0].start_location; // สถานที่เริ่มต้น var locaEnd = results.routes[0].legs[0].end_location; var distanceText = results.routes[0].legs[0].distance.text; // ระยะทางข้อความ // นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ $("#namePlaceGet").val(addressStart); $("#toPlaceGet").val(addressEnd); $("#a").val(locaStart); $("#a1").val(locaStart.lat()); $("#a2").val(locaStart.lng()); $("#b").val(locaEnd); $("#b1").val(locaEnd.lat()); $("#b2").val(locaEnd.lng()); $("#distance_text").val(distanceText); // ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้ } else { // กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้ // โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง } }); } // ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน $("#SearchPlace").click(function () { // เมื่อคลิกที่ปุ่ม id=SearchPlace searchRoute(); // เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง }); $("#namePlace,#toPlace").keyup(function (event) { // เมื่อพิมพ์คำค้นหาในกล่องค้นหา if (event.keyCode == 13 && $(this).val() != "") { // ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter searchRoute(); // เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง } }); $("#iClear").click(function () { $("#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่ }); }); $(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("#google_map"); }); </script> </div>
Komza
20-01-2014
17:50:08
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ