ช่วยไกด์และแนะนำการเขียนโค้ดทีนะค่ะ[google map]

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

ช่วยไกด์และแนะนำการเขียนโค้ดทีนะค่ะ[google map]

คือตอนนี้หนูสร้าง dop down ไว้เพื่อเลือกสถานที่ พอกดปุ่ม ok ปุ๊บ อยากขึ้นจุดที่ต้องการ พร้อมปักหมุดค่ะ

คือควรจะเขียนยังไงดีค่ะ ต้องใช้ภาษาอะไรเขียนค่ะ ทำเป็นเว็บอ่ะค่ะ

View 02-02-2013 03:22:12

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

แสดงแผนที่พร้อมตำแหน่งเริ่มเต้น

สร้างดร็อปดาวน์ ต้องดูค่าในดร็อปดาวน์ ว่าส่งค่า ส่งค่าตำแหน่ง พิกัด ไปไหม
เขียนคำสั่ง javascript หรือใช้ jQuery ตามสะดวก ส่งค่าไปในแผนที่
ให้แผนที่แสดงตำแหน่งตามค่าที่ส่งมา

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

<!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>Google Map API 3 - google_map_v3_set_marker_from_list_menu.php</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 { 
    width:550px;
    height:400px;
    margin:auto;
/*  margin-top:100px;*/
}
/* css กำหนดส่วนของการแสดง list menu */
div#list_menu_place{
    width:550px;
    margin:auto;    
}
</style>
 
 
</head>
 
<body>
<br />
<br />
<br />
<div id="list_menu_place">
<!--หาได้จากหน้า https://www.ninenik.com/content.php?arti_id=334-->
เลือกชื่อสถานที่ 
  <select name="name_place_list_menu" id="name_place_list_menu">
    <option value="">เลือกรายการ</option>
    <option value="15.9717357,102.62162109999997">ขอนแก่น</option>
    <option value="14.7579424,104.47233010000002">ศรีสะเกษ</option>
    <option value="17.7696871,102.75948470000003">หนองคาย</option>
    <option value="18.7964642,98.66005859999996">เชียงใหม่</option>
    <option value="19.8737421,99.72326729999997">เชียงราย</option>                
  </select>
  <input type="button" name="button2" id="button2" value="OK"  />
</div>
<div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
  ข้อมูลสถานที่<br />
  <textarea name="place_value" rows="2" id="place_value" style="width:380px;"></textarea>  
    <br />
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  
     
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
   
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var geocoder; // กำหนดตัวแปร สำหรับใช้งานข้อมูลสถานที่จาก Google Map
var my_Marker;
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(18.7964642,98.66005859999996);
     
    // เรียกใช้งานข้อมูล Geocoder ของ Google Map
    geocoder = new GGM.Geocoder();
     
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 7, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
     
    my_Marker = new GGM.Marker({ // สร้างตัว marker
        position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
        draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
        title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
    });
     
    // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
    GGM.event.addListener(my_Marker, "dragend", function() {
        var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker       
         
        // เรียกขอข้อมูลสถานที่จาก Google Map
        geocoder.geocode({"latLng": my_Point}, function(results, status) {
          if (status == GGM.GeocoderStatus.OK) {
            if (results[1]) {
                // แสดงข้อมูลสถานที่ใน textarea ที่มี id เท่ากับ place_value
              $("#place_value").val(results[1].formatted_address); // 
            }
          } else {
              // กรณีไม่มีข้อมูล
            alert("Geocoder failed due to: " + status);
          }
        });     
         
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
    });     
 
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
    GGM.event.addListener(map, "zoom_changed", function() {
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
    });
 
}
// ฟังก์ชั่น สำหรับให้แผนทีไปที่จุดตามค่าตำแหน่งที่ส่งมา
function go_to_select_place(placeVal){
//  GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM   
//  console.log(placeVal);
    var positionVal=placeVal.split(","); // แยกค่าที่ส่งมาออกเป็นสองค่า คือ lat กับ lon
//  console.log(positionVal);
    var my_Latlng  = new GGM.LatLng(positionVal[0],positionVal[1]);
    map.setCenter(my_Latlng); // กำหนดตำแแน่งตรงกลางแผนที่
    my_Marker.setPosition(my_Latlng); // กำนหดตัวแปน่ง marker
//  map.panTo(my_Latlng);  // ให้แผนที่แสดงไปที่ตัว marker      
}
$(function(){
    // คำสั่งให้ทำเงิน เมื่อกดที่ปุ่ม นk ที่มี id เท่ากับ button2
    $("#button2").click(function(){
        // เอาคาจาก สist menu เข้าฟังก์ชัน go_to_select_place
        go_to_select_place($("select#name_place_list_menu").val()); 
    });
    // โหลด สคริป 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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
    }).appendTo("body");    
});
</script>  
</body>
</html>

ตัวอย่างผลลัพธ์

เลือกชื่อสถานที่

Ninenik Narkdee 03-02-2013

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

ถ้าหากมีการเก็บข้อมูลลง db มันจะรับค่าได้ยังไงค่ะ ส่วนนี้หนูยัง งงๆอยู่ หรือว่า มันจะไปประมวลผลของมันเองในการวนลูปทำ mark

view 03-02-2013 01:39

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

ถ้ามีการเก็บข้อมูลลง db ก็ต้องใช้ ภาษา php ในการจัดการ

ที่ถามว่า เก็บข้อมูลลง db อันนี้ก็ต้องดูว่า หมายถึงเก็บข้อมูลอะไรลง db

แล้วข้อมูลที่เก็บ เอามาใช้ด้วยไหม ถ้าเอาไปใช้ เอาไปใช้ทำอะไรในแผนที่ไหม

ninenik 03-02-2013

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

หนูเก็บค่าละติจูดลองติดจูดไว้ค่ะ พร้อมกับชื่อสถานที่

หนูรู้แค่ว่าเราต้องเอาค่าละติจูดลองติจูดไปประมวลผลในแผนที่

แต่หนูไม่รูว่าเราจะต้องเขียนมันยังไง คือหนูมือใหม่มากค่ะ หนูเขียนโปรแกรมไม่ค่อยได้

รบกวนพี่ช่วยให้คำตอบหนูทีนะค่ะ หนูติดมา สามวัน แล้วค่ะ ไม่ได้จริงๆ

view 03-02-2013 15:17

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

ถ้ามีข้อมูลอยู่แล้ว ก็เขียนโปรแกรม ดึงข้อมูลมาใช้กับ list menu ได้เลย

ถ้าวิธีเขียนก็แนะนำให้ถามเพื่อน หรือคนที่เขาพอจะรู้ใกล้ๆตัวเอา

ตัวอย่างโค้ตด้านล่างถือว่า สามารถเอาไปประยุกต์ได้เลย

ninenik 03-02-2013

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

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

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