สอบถามเรื่องการใช้งาน RouteBoxer กำหนดขอบเขตเส้นทางใน google map

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่องการใช้งาน RouteBoxer กำหนดขอบเขตเส้นทางใน google map

สอบถามเรื่องการใช้งาน RouteBoxer กำหนดขอบเขตเส้นทางใน google map

	คือว่าใช้โค้ดนี้ทำหน้าค้นหาเส้นทางสถานที่ท่องเที่ยว แต่พอใส่ชื่อสถานที่ในช่อง From กับช่อง To พอกดปุ่ม Seach 

	กลับไม่หาเส้นทางให้อ่ะค่ะ ควรทำยังไงเหรอค่ะ 

	

	

	

	

	

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta 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;
    }
    /* css สำหรับ div คลุม google map อีกที */
    #contain_map{
        position:relative;
        width:550px;
        height:400px;
        margin:auto;    
        color:#000000;
    }
    /* css ของส่วนการกำหนดจุดเริ่มต้น และปลายทาง */
    #showDD{
        position:absolute;
        bottom:0px;
        height:30px;
        padding-top:5px;
        background-color:#CCC;
/*        color:#FFF;   */
    }
    /* css ของส่วนแสดงคำแนะนำเส้นทางการเดินทาง */
    #directionsPanel{
        width:550px;
        margin:auto;
        clear:both; 
/*        background-color:#F1FEE9;*/
    }
    /* css ในส่วนข้อมูลการแนะนำเส้นทาง เพิ่มเติม ถ้าต้องการกำหนด */
    .adp-placemark{
/*        background-color:#9C3;*/
    }
    .adp-summary{
 
    }
    .adp-directions{
 
    }
    </style>
 
</head>
<body>
 
<div id="contain_map">
<div id="map_canvas"></div>
<div id="showDD">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
 
<table width="550" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
From :
<input name="namePlace" type="text" id="namePlace" value="" size="20" />
To:
<input name="toPlace" type="text" id="toPlace" value="" size="20" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />    
    </td>
  </tr>
</table>
</div>   
</div>
<div id="directionsPanel"></div>
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&libraries=places" type="text/javascript"></script>
<script src="js/RouteBoxer.js" type="text/javascript"></script>

 
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
     
 
     
var boxpolys = null;
var routeBoxer = null;
var distance_radius = 0.1 * 1.609344; // เปลี่ยน 0.1 เป็นค่าอื่น 0.1 คือ 100 เมตร   
var drawBoxes;    // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น 
var clearBoxes;   // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น  
 
var findPlaces;   // ยังไม่ใช้ในตอนนี้
var servicePlace; // ยังไม่ใช้ในตอนนี้
     
     
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    directionShow=new  GGM.DirectionsRenderer({draggable:true});
    directionsService = new GGM.DirectionsService();
 
     
    // กำหนดจุดเริ่มต้นของแผนที่
    my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
    // กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
    initialTo=new GGM.LatLng(13.8129355,100.7316899); 
    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
    servicePlace = new GGM.places.PlacesService(map); // ยังไม่ใช้ตอนนี้ กำหนดไว้ไม่เสียหาย
     
     
    routeBoxer = new RouteBoxer(); // สร้าง object
 
    directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
    // ส่วนสำหรับกำหนดให้แสดงคำแนะนำเส้นทาง
    directionShow.setPanel($("#directionsPanel")[0]);  
     
 
     
    if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
         searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
    }
     
    // กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
    GGM.event.addListener(directionShow, 'directions_changed', function() {
        var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
//        console.log(results.routes[0].legs[0].steps);
//        console.log(results.routes[0].overview_path);
        clearBoxes();
      // Box around the overview path of the first route
        var path = results.routes[0].overview_path;
        var boxes = routeBoxer.box(path, distance_radius);
        drawBoxes(boxes);     
         
    });
 
}
$(function(){
     
 
     
    searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
        clearBoxes(); // ล้างค่า
        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); // สร้างเส้นทางจากผลลัพธ์
            }else{
                // กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
                // โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
            }
        });
    }
     
    // ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
    $("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
        searchRoute();  // เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
    });
 
    $("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
        if(event.keyCode==13 && $(this).val()!=""){ //  ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
            searchRoute();      // เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
        }       
    });
     
    $("#iClear").click(function(){
        clearBoxes();
        $("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
    });
     
     
     
     
     
    // วาดรูปสี่เหลี่ยม จาก array ของ boxes แล้วแสดงในแผนที่
    drawBoxes = function(boxes) {
      boxpolys = new Array(boxes.length);
      for (var i = 0; i < boxes.length; i++) {
        boxpolys[i] = new GGM.Rectangle({
          bounds: boxes[i],
          fillOpacity: 0,
          strokeOpacity: 0.5, // ถ้าไม่ต้องการให้มองเห็นกำหนดเป็น 0
          strokeColor: '#000000',
          strokeWeight: 1,
          map: map
        });
      }
    }
     
     
     
    // ฟังก์ชั่นวนลูปล้างค่า boxes ออกจากแผนที่ 
    clearBoxes = function() {
      if (boxpolys != null) {
        for (var i = 0; i < boxpolys.length; i++) {
          boxpolys[i].setMap(null);
        }
      }
      boxpolys = null;
    }    
     
     
});
$(function(){
     
    // ทำงานสร้างและใช้งานแผนที่
    initialize();  
    // สังเกตว่า เราจะไม่ได้มีการเรียกใช้ ฟังก์ชั่น initialize แบบกำหนด callback เหมืนอตัวอย่าง
    // ก่อนเนื่องจาก RouteBoxer จำเป็นต้องมีการเรียกใช้งาน google.maps objext ไฟล์
    // google map จึงกำหนดในแท็ก script  ด้านบน
     
});      
</script>  
</body>
</html>

Irondream 05-08-2017 15:03:51

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

เนื้อหาเกี่ยวกับการกำหนดขอบเขตตามเส้นทางด้วย RouteBoxer เท่าที่ดูจากบทความ ก็ยังใช้งานได้ปกติ

ยังไงลอง debug ดูว่า error อะไร

การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie

https://www.ninenik.com/content.php?arti_id=692 via @ninenik

แนวทางแก้ปัญหา Google map ไม่แสดง และการใช้งาน API Key

https://www.ninenik.com/content.php?arti_id=783 via @ninenik

ส่วนเนื้อหาเกี่ยวกับ RouteBoxer จะมีด้วยกัน 3 ตอน เนื้อหาตอนแรกเป็นการใช้งาน

ส่วนตอนที่ 2 กับ 3 เป็นการประยุกต์ ลองทบทวนเนื้อหาเพิ่มเติมดู

ใช้งาน RouteBoxer กำหนดขอบเขตตามเส้นทาง ใน google map ตอนที่ 1

https://www.ninenik.com/content.php?arti_id=650 via @ninenik

แสดงข้อมูล google place type ตามเส้นทาง ใน google map ตอนที่ 2

https://www.ninenik.com/content.php?arti_id=651 via @ninenik

แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง ใน google map ตอนที่ 3

https://www.ninenik.com/content.php?arti_id=652 via @ninenik

ninenik 05-08-2017

ความคิดเห็นที่ 2

ลองเปิด console ก็ยังไม่ได้อ่ะค่ะ

irondream 05-08-2017 19:58

ความคิดเห็นที่ 3

ตาม error แจ้งก็คือ ถ้าจะใช้ direction service จำเป็นต้องกหนด API Key ให้ดูวิธีใช้งาน API Key
ตามลิ้งค์ที่่สองในความคิดเห็นแรกที่แนะนำไป

แนวทางก็คือ เพิ่ม key เข้าไป

<script src="//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&libraries=places&key=xxxxxx" type="text/javascript"></script>

แทน xxx ด้วย API Key

ninenik 05-08-2017

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน