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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถาม แจ้ง เมื่อโหลดแผนที่นานเกิน 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 171.96.245.xxx 21-09-2014 08:48:16

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

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


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


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

 ความคิดเห็นที่ 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 171.96.245.xxx 21-09-2014 08:53
 ความคิดเห็นที่ 2
ลองเอาเนื้อหาเก่านี้ไปประยุกต์ดู

สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map 


ninenik 58.11.234.xxx 22-09-2014







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ