PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถาม แจ้ง เมื่อโหลดแผนที่นานเกิน 1นาที

สอบถาม แจ้ง เมื่อโหลดแผนที่นานเกิน 1นาที
บางครั้งจะใช้เวลาโหลดนานมาก อยากให้แจ้ง แล้วมี popup ให้รีโหลดได้นะครับ
โค้ดเอามาจากตัวอย่าง ผมเพิ่ม รูปเวลาโหลดข้อมูล กับเปลี่ยนที่ เมนูเลือก แค่นั้น ยังไม่ได้ปรับเพิ่ม อะไร แต่บางครั้งโหลดแล้วค้างไม่ไปไหนเลยครับ




<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</title>
    <style>
       html,body {     
       
        width: 100%;     
        height: 100%;               
    }     
    #overlay {     
        position: absolute;    
        top: 0px;     
        left: 0px;    
        background: #ccc;     
        width: 100%;     
        height: 100%;     
        opacity: .75;     
        filter: alpha(opacity=75);     
        -moz-opacity: .75;    
        z-index: 999;    
        background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;  
    }     
    .main-contain{  
        position: absolute;    
        top: 0px;     
        left: 0px;    
        width: 100%;     
        height: 100%;     
        overflow: hidden;  
    }  


     #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };

  $("#overlay").fadeIn();
  $("#main_contain").addClass( "main-contain" );

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      
      $("#overlay").fadeOut();
      $("#main_contain").removeClass("main-contain");

      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="overlay"></div>      
    <div id="main_contain" class="main-contain"> 
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
     <option value="กรุงเทพมหานคร">กรุงเทพมหานคร </option>
     <option value="สมุทรปราการ">สมุทรปราการ </option>
     <option value="นนทบุรี">นนทบุรี </option>
     <option value="ปทุมธานี">ปทุมธานี </option>
     <option value="พระนครศรีอยุธยา">พระนครศรีอยุธยา </option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
       <option value="12.474426,102.053444">วนอุทยานเขาแหลมสิงห์</option>
       <option value="12.534435,101.940994">หาดเจ้าหลาว</option>
       <option value="12.610228,102.119202">โบสถ์คาทอลิก </option>       
       <option value="12.854482,102.169907">เขาคิชฌกูฏ</option>
       <option value="12.842724,102.130318">น้ำตกกระทิง </option>
       <option value="12.530560,102.184044">น้ำตกพลิ้ว</option>
       <option value="13.679181,101.067665">วัดโสธรวรารามวรวิหาร</option>
       <option value="13.706533,101.140625">วัดสมานรัตนาราม</option>
       <option value="13.722334,101.202599">วัดโพธิ์ บางคล้า</option>
       <option value="13.566194,101.429504">อ่างเก็บน้ำลาดกระทิง</option>
       <option value="13.762645,101.512466">ศูนย์ศึกษาการพัฒนาเขาหินซ้อน</option>
       <option value="13.661667,100.953018">ตลาดคลองสวน 100 ปี</option>
       <option value="13.310910,100.904480">เขาสามมุข</option>
       <option value="13.216049,101.056488">สวนสัตว์เปิดเขาเขียว</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="12.666572,101.241882">พระสมุทรเจดีย์กลางน้ำ</option>
      <option value="12.570460,101.449379">อ่าวพร้าว</option>
      <option value="12.554511,101.449974">อ่าววงเดือน</option>
      <option value="13.665733,102.548012">ตลาดโรงเกลือ</option>
      <option value="14.052829,102.321724">อุทยานแห่งชาติปางสีดา</option>
    </select>
    <br>
      <input type="submit" onclick="calcRoute();">
    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
    </div>
  </body>
</html>



โดย:  Wowowow IP: 171.96.245.xxx วันที่: 21-09-2014 เวลา: 08:48:16

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
ลองเอาเนื้อหาเก่านี้ไปประยุกต์ดู

สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map 
http://www.ninenik.com/content.php?arti_id=359 via @ninenik


โดย:  Ninenik IP: 58.11.234.xxx วันที่: 22-09-2014
 ความคิดเห็นที่ 1


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</title>
    <style>
       html,body {     
       
        width: 100%;     
        height: 100%;               
    }     
    #overlay {     
        position: absolute;    
        top: 0px;     
        left: 0px;    
        background: #ccc;     
        width: 100%;     
        height: 100%;     
        opacity: .75;     
        filter: alpha(opacity=75);     
        -moz-opacity: .75;    
        z-index: 999;    
        background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;  
    }     
    .main-contain{  
        position: absolute;    
        top: 0px;     
        left: 0px;    
        width: 100%;     
        height: 100%;     
        overflow: hidden;  
    }  


     #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };

  $("#overlay").fadeIn();
  $("#main_contain").addClass( "main-contain" );

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      
      $("#overlay").fadeOut();
      $("#main_contain").removeClass("main-contain");

      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="overlay"></div>      
    <div id="main_contain" class="main-contain"> 
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
     <option value="กรุงเทพมหานคร">กรุงเทพมหานคร </option>
     <option value="สมุทรปราการ">สมุทรปราการ </option>
     <option value="นนทบุรี">นนทบุรี </option>
     <option value="ปทุมธานี">ปทุมธานี </option>
     <option value="พระนครศรีอยุธยา">พระนครศรีอยุธยา </option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
       <option value="12.474426,102.053444">วนอุทยานเขาแหลมสิงห์</option>
       <option value="12.534435,101.940994">หาดเจ้าหลาว</option>
       <option value="12.610228,102.119202">โบสถ์คาทอลิก </option>       
       <option value="12.854482,102.169907">เขาคิชฌกูฏ</option>
       <option value="12.842724,102.130318">น้ำตกกระทิง </option>
       <option value="12.530560,102.184044">น้ำตกพลิ้ว</option>
       <option value="13.679181,101.067665">วัดโสธรวรารามวรวิหาร</option>
       <option value="13.706533,101.140625">วัดสมานรัตนาราม</option>
       <option value="13.722334,101.202599">วัดโพธิ์ บางคล้า</option>
       <option value="13.566194,101.429504">อ่างเก็บน้ำลาดกระทิง</option>
       <option value="13.762645,101.512466">ศูนย์ศึกษาการพัฒนาเขาหินซ้อน</option>
       <option value="13.661667,100.953018">ตลาดคลองสวน 100 ปี</option>
       <option value="13.310910,100.904480">เขาสามมุข</option>
       <option value="13.216049,101.056488">สวนสัตว์เปิดเขาเขียว</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="12.666572,101.241882">พระสมุทรเจดีย์กลางน้ำ</option>
      <option value="12.570460,101.449379">อ่าวพร้าว</option>
      <option value="12.554511,101.449974">อ่าววงเดือน</option>
      <option value="13.665733,102.548012">ตลาดโรงเกลือ</option>
      <option value="14.052829,102.321724">อุทยานแห่งชาติปางสีดา</option>
    </select>
    <br>
      <input type="submit" onclick="calcRoute();">
    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
    </div>
  </body>
</html>

ผมกดจัดโค้ดแล้วมันเพี้ยน ลองใส่อีกรอบ

โดย:  Wowowow IP: 171.96.245.xxx วันที่: 21-09-2014 เวลา: 08:53:37