สอบถามการใช้งาน google map ครับ

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

สอบถามการใช้งาน google map ครับ

ผมลองอ่านดูวิธีการทำ

ลองทำตามดู แล้วอยากจะประยุกต์ครับ เช่นจะเอาไปประยุกต์ใช้กับร้าน ว่า จุด มาร์ก ที่เห็น คือร้านของผม

แล้วให้ลูกค้า ป้อน lat long แล้วให้กูเกิลคำนวน เป็นระยะทางออกมา หรือให้ลูกค้าระบุจุดมาร์ก อีกตัวเพื่อลากไปยัง บ้านของลูกค้า

อาจจะไม่ต้องป้อน lat long ก็ได้ครับ

คล้ายแบบนี้ครับ

ระยะทางจากเชียงใหม่ไปสิงคโปร์

แล้วก็กดปุ่มคำนวนเพื่อให้กูเกิลคำนวนออกมาครับ

ขอบคุณบทความดีดี ที่มีมาให้อ่านเรื่อยๆครับ แต่ละบทสุดยอดจริงๆเลยครับ ขอบคุณจากใจจริงครับ

Amdev 20-04-2010 14:41:43

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ลองดูตัวอย่าง https://www.ninenik.com/สร้างเส้นทาง_เพื่อ_หาระยะทาง_ใน_google_map_ด้วย_jQuery-276.html อาจเป็นแนวทางได้

ใน google map api มีหลายส่วนที่สามารถนำไปใช้ หรือประยุกต์ใช้งานได้

หากมีแนวคิด หรือไอเดียดี ๆ ลองมาโพสถามไว้ เพื่อเป็นแนวทางสำหรับ เขียนบทความต่อไป

ninenik 21-04-2010

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

ขอบคุณมากๆครับ

ขอถามเพิ่มอีกนิดนึงครับ แล้วถ้า จะให้กูเกิลบอกเราด้วยว่า ให้เลี้ยวซ้ายตรงนี้ ขวาตรงนี้

เหมือนตัวอย่างที่ให้ดูนี้ เพิ่มยังไงครับ

amdev 22-04-2010 09:27

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

การเพิ่มการอธิบายเส้นทาง ขอต่อจาก บทความ

https://www.ninenik.com/สร้างเส้นทาง_เพื่อ_หาระยะทาง_ใน_google_map_ด้วย_jQuery-276.html

มีการปรับเพิ่มมาเล็กน้อย ให้ดูโค้ดด้านล่างกับ บทความตามลิ้งด้านบน เปรียบเทียบกันดู

ตัวอย่าง

โค้ด

100

101

102

<!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></title>
<style type="text/css">
html{
    padding:0px;
    margin:0px;
}
div#map_canvas{
    margin:auto;
    width:600px;
    height:550px;
    overflow:hidden;
}
div#route{
    width: 250px;
    height:380px;
    border:1px solid black;
    position:absolute;
    float:left;
    font-size:12px;
    background-color:#F4F4F4;   
    overflow:auto;
    display:none;
}
</style>
 
</head>
 
<body>
 
 
<div id="route"></div>
<div id="map_canvas"></div> 
 
 
 
<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg&amp;hl=th" type="text/javascript"></script>
<script type="text/javascript"> 
var directionsPanel; // เพิ่มส่วนอธิบายเส้นทาง
var directions; // สร้างตัวแปรสำหรับกำหนดเส้นทาง
function initialize() { 
  if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map_canvas"));     
    var center = new GLatLng(13.77436,100.53458); // การกำหนดจุดเริ่มต้น
    map.setCenter(center, 13);  // เลข 13 คือค่า zoom  สามารถปรับตามต้องการ 
    map.setUIToDefault(); 
     
    var marker = new GMarker(center, {draggable: false});  // สร้างตัว mark เริ่มต้น
    map.addOverlay(marker);
     
    var markerGoTo = new GMarker(center, {draggable: true}); // สร้างตัว mark อีกอัน
    directionsPanel = document.getElementById("route"); // ส่วนสำหรับแสดงคำอธิบายเส้นทาง
    map.addOverlay(markerGoTo);
    directions = new GDirections(map,directionsPanel);  // เพิ่มส่วนอธิบายเส้นทาง
    var directOpt= { "preserveViewport": true, "getSteps": true ,"getPolyline":true};   // กำหนดรูปแบบของส้นทาง
 
    GEvent.addListener(markerGoTo, "dragend", function() {
        var point = markerGoTo.getPoint(); // หาตำแหน่างเมื่อหยุดการลากตัว mark
        // แสดงคำอธิบายเส้นทาง พร้อมจัดตำแหน่ง เลือกกำหนดตำแหน่งตามต้องการ
        $(directionsPanel).show().css({
            left:$("div#map_canvas").offset().left,
            top:$("div#map_canvas").offset().top,
            "z-index":1000
        });
        directions.load("from: "+point+" to:13.77436,100.53458 ",directOpt); // สร้างเส้นทาง
    });
    GEvent.addListener(directions, "load", function() {
        var drivingDistanceKilometers = directions.getDistance().meters / 1000;     // หาระยะทางเป็น กิโลเมตร
        $("#distanceDrive").val(drivingDistanceKilometers); // นำค่าที่ได้ไปใส่ใน textbox 
    });         
      
  } 
} 
</script> 
<script type="text/javascript" src="../jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
    initialize();
    $(document.body).unload(function(){
            GUnload();
    });
    $("#Reset").click(function(){
        directions.clear(); // ลบเส้นทางจากแผนที่
        $(directionsPanel).hide(); // ปิดคำอธิบายเส้นทาง
    }); 
});
</script>
<div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
    ระยะทาง
    <input name="distanceDrive" type="text" id="distanceDrive" value="0" />
    กม.
    <input type="submit" name="button" id="button" value="บันทึก" />
    <input type="button" name="Reset" id="Reset" value="ยกเลิก เพื่อกำหนดจุดใหม่" />
  </form>
</div>
</body>
</html>

ninenik 22-04-2010

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

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

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