สอบถาม วิธีดึงค่า Lat Long จาก การค้นหาแบบ AutoComplete มาแสดงที่ textbox ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถาม วิธีดึงค่า Lat Long จาก การค้นหาแบบ AutoComplete มาแสดงที่ textbox ครับ

สอบถาม วิธีดึงค่า Lat Long จาก การค้นหาแบบ AutoComplete มาแสดงที่ textbox ครับ

สืบเนื่องจาก ใช้งาน autocomplete ใน google place ไลบรารี่ ของ google map

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

ขอบคุณครับ....

Boomzaclub 223.205.244.xxx 02-10-2015 17:18:16

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

นี่เป็นโค้ดที่ผมดูมาจากเว็บ Thaicreate ครับ

<html>
  <head>
    <title>Geocoding with GMap v3</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.ui-autocomplete {
	background-color: white;
	width: 300px;
	border: 1px solid #cfcfcf;
	list-style-type: none;
	padding-left: 0px;
}
</style>
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
	<script type="text/javascript">
var geocoder;
var map;
var marker;
    
function initialize(){
  var latlng = new google.maps.LatLng(15.092211605036871,104.32937908834231);
  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
        
  map = new google.maps.Map(document.getElementById("map_canvas"), options);
        
//ใช้ GEOCODER
  geocoder = new google.maps.Geocoder();        
  marker = new google.maps.Marker({
    map: map,
    draggable: true
  });
				
}
		
$(document).ready(function() {          
  initialize();				  
  $(function() {
    $("#address").autocomplete({
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      sleect: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
  });
});
	</script>
  </head>
  <body>
    <label>ที่อยู่:  </label><input id="address"  type="text" size="50" />
    <div id="map_canvas" style="width:640px; height:480px"></div><br/>
    <label>latitude: </label><input id="latitude" type="text"/><br/>
    <label>longitude: </label><input id="longitude" type="text"/>
  </body>
</html>

ดูๆแล้ว เหมือน มาคนละแบบ แต่ผมว่า ว่า ตรง input ของเว็บ Ninenik นี้ดูสวยและเป็นธรรมชาติกว่า ครับ
คือผมอยากได้ แผนที่ในรูปแบบของเว็บ Ninenik นี้อะครับ แต่อยากให้มีการดึงค่า Lat Long มาไว้ใน Textbox ด้วย เหมือนเว็บ Thaicreate ไม่รู้จะประยุกต์ใช้ด้วยกันยังไงอะครับ เหมือน 2 โค้ดนี้ ทำมาคนละแนวกันอะครับ

หรือ หากมีวิธีอื่นที่ทำได้ ก็ช่วยแนะนำทีน่ะครับ ขอบคุณครับ

Boomzaclub 223.205.244.xxx 02-10-2015 17:52

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

ไม่ต่างกันมาก คล้ายกัน ดูตรงตัวแปรที่ชื่อ place.geometry.location

ถ้าจะใช้ lat ก็ใช้ตัวแปร place.geometry.location.lat();

ถ้าจะใช้ lon ก็ใช้ตัวแปร place.geometry.location.lng();

อย่างก่อนบรรทัด

my_Marker.setPosition(place.geometry.location);

ก็อาจจะเอาค่าไปแสดงใน textbox แบบ jquery ประมาณนี้

$("#latitude").val(place.geometry.location.lat());
$("#longitude").val(place.geometry.location.lng());
my_Marker.setPosition(place.geometry.location);

ninenik 1.47.136.xxx 02-10-2015

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

ขอบคุณครับ

เดี๋ยวผมขอลองดูก่อนน่ะครับ

Boomzaclub 223.205.244.xxx 02-10-2015 20:46

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

ผมลองสลับไปมาดูวางแล้ว ไม่ได้เลยครับ ไม่ทราบว่าผมวางผิดหรือปล่าว

ควรวางในตำแหน่งไหนอะครับ

<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>

<body>
<style type="text/css">
/* css สำหรับ div คลุม google map อีกที */
#contain_map{
	position:relative;
	width:650px;
	height:400px;
	margin:auto;	
}	
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	top:0px;
	width:100%;
	height:400px;
	margin:auto;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา effect */
.controls_tools {
	margin-top: 16px;
	border: 1px solid transparent;
	border-radius: 2px 0 0 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	outline: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา*/
#pac-input {
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 60%;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา ขณะ focus*/
#pac-input:focus {
	width: 60%;
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px;  /* Regular padding-left + 1. */      
}

</style>
<br />
<br />

<div id="contain_map">
  <input id="pac-input" class="controls_tools" type="text"placeholder="Enter a location">  
  <div id="map_canvas"></div>
</div>
<br>
<div style="text-align:center;">
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" /> 
    Longitude  
    <input name="lng_value" type="text" id="lng_value" value="0" size="17" />    
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var inputSearch; // กำหนดตัวแปร สำหรับ อ้างอิง input สำหรับพิมพ์ค้นหา
var infowindow;// กำหนดตัวแปร สำหรับใช้แสดง popup สถานที่ ที่ค้นหาเจอ
var autocomplete; // กำหนดตัวแปร สำหรับเก็บค่า การใช้งาน places Autocomplete
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	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

	inputSearch = $("#pac-input")[0]; // เก็บตัวแปร dom object โดยใช้ jQuery
	// จัดตำแหน่ง input สำหรับการค้นหา ด้วย คำสั่งของ google map
	map.controls[GGM.ControlPosition.TOP_LEFT].push(inputSearch);
	
	// เรียกใช้งาน Autocomplete โดยส่งค่าจากข้อมูล input ชื่อ inputSearch
	autocomplete = new GGM.places.Autocomplete(inputSearch);
	autocomplete.bindTo('bounds', map); 
	place.geometry.location.lat();
	place.geometry.location.lng();
	infowindow = new GGM.InfoWindow();// เก็บ InfoWindow object ไว้ในตัวแปร infowindow
	// เก็บ Marker object พร้อมกำหนดรูปแบบ ไว้ในตัวแปร my_Marker
	my_Marker = new GGM.Marker({
		map: map,
		anchorPoint: new GGM.Point(0, -29)
	});
	
	// เมื่อแผนที่มีการเปลี่ยนสถานที่ จากการค้นหา
	GGM.event.addListener(autocomplete, 'place_changed', function() {
		infowindow.close();// เปิด ข้อมูลตัวปักหมุด (infowindow)
		my_Marker.setVisible(false);// ซ่อนตัวปักหมุด (marker) 
		var place = autocomplete.getPlace();// เก็บค่าสถานที่จากการใช้งาน autocomplete ไว้ในตัวแปร place
		if (!place.geometry) {// ถ้าไม่มีข้อมูลสถานที่ 
			return;
		}
		
		// ถ้ามีข้อมูลสถานที่  และรูปแบบการแสดง  ให้แสดงในแผนที่
		if (place.geometry.viewport) {
			map.fitBounds(place.geometry.viewport);
			$("#lat_value").val(place.geometry.location.lat());
			$("#lng_value").val(place.geometry.location.lng());
			my_Marker.setPosition(place.geometry.location);  
		} else { // ให้แสดงแบบกำหนดเอง
			map.setCenter(place.geometry.location);
			map.setZoom(17);  // แผนที่ขยายที่ขนาด 17 ถือว่าเหมาะสม
		}
		
		// ปักหมุด (marker) ตำแหน่ง สถานที่ที่เลือก
		my_Marker.setPosition(place.geometry.location);
		my_Marker.setVisible(true);// แสดงตัวปักหมุด จากการซ่อนในการทำงานก่อนหน้า
		
		// สรัางตัวแปร สำหรับเก็บชื่อสถานที่ จากการรวม ค่าจาก array ข้อมูล
		var address = '';
		if (place.address_components) {
			address = [
				(place.address_components[0] && place.address_components[0].short_name || ''),
				(place.address_components[1] && place.address_components[1].short_name || ''),
				(place.address_components[2] && place.address_components[2].short_name || '')
			].join(' ');
		}
		
		// แสดงข้อมูลในตัวปักหมุด (infowindow)
		infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
		infowindow.open(map, my_Marker);// แสดงตัวปักหมุด (infowindow)
		
	});
}




$(function(){
	$("<script/>", {
	  "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize&libraries=places"
	}).appendTo("body");	
});
</script>
</body>
</html>

ผมวางแบบนี้แล้วยังไม่ได้อะครับ ต้องวาง
place.geometry.location.lat();
place.geometry.location.lng();

และ

$("#latitude").val(place.geometry.location.lat());

$("#longitude").val(place.geometry.location.lng());

my_Marker.setPosition(place.geometry.location);

ไว้ตรงไหนเหรอครับ

Boomzaclub 223.205.244.xxx 02-10-2015 21:20

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

ถ้าใส่ตามที่บอกก็น่าจะได้น่ะ ก่อน my_Marker.setPosition,,,,

Latitude Longitude

<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>

<body>
<style type="text/css">
/* css สำหรับ div คลุม google map อีกที */
#contain_map{
	position:relative;
	width:650px;
	height:400px;
	margin:auto;	
}	
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	top:0px;
	width:100%;
	height:400px;
	margin:auto;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา effect */
.controls_tools {
	margin-top: 16px;
	border: 1px solid transparent;
	border-radius: 2px 0 0 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	outline: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา*/
#pac-input {
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 60%;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา ขณะ focus*/
#pac-input:focus {
	width: 60%;
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px;  /* Regular padding-left + 1. */      
}

</style>
<br />
<br />

<div id="contain_map">
  <input id="pac-input" class="controls_tools" type="text"placeholder="Enter a location">  
  <div id="map_canvas"></div>
</div>
<br>
<div style="text-align:center;">
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" /> 
    Longitude  
    <input name="lng_value" type="text" id="lng_value" value="0" size="17" />    
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var inputSearch; // กำหนดตัวแปร สำหรับ อ้างอิง input สำหรับพิมพ์ค้นหา
var infowindow;// กำหนดตัวแปร สำหรับใช้แสดง popup สถานที่ ที่ค้นหาเจอ
var autocomplete; // กำหนดตัวแปร สำหรับเก็บค่า การใช้งาน places Autocomplete
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	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

	inputSearch = $("#pac-input")[0]; // เก็บตัวแปร dom object โดยใช้ jQuery
	// จัดตำแหน่ง input สำหรับการค้นหา ด้วย คำสั่งของ google map
	map.controls[GGM.ControlPosition.TOP_LEFT].push(inputSearch);
	
	// เรียกใช้งาน Autocomplete โดยส่งค่าจากข้อมูล input ชื่อ inputSearch
	autocomplete = new GGM.places.Autocomplete(inputSearch);
	autocomplete.bindTo('bounds', map); 
//	place.geometry.location.lat();
//	place.geometry.location.lng();
	infowindow = new GGM.InfoWindow();// เก็บ InfoWindow object ไว้ในตัวแปร infowindow
	// เก็บ Marker object พร้อมกำหนดรูปแบบ ไว้ในตัวแปร my_Marker
	my_Marker = new GGM.Marker({
		map: map,
		anchorPoint: new GGM.Point(0, -29)
	});
	
	// เมื่อแผนที่มีการเปลี่ยนสถานที่ จากการค้นหา
	GGM.event.addListener(autocomplete, 'place_changed', function() {
		infowindow.close();// เปิด ข้อมูลตัวปักหมุด (infowindow)
		my_Marker.setVisible(false);// ซ่อนตัวปักหมุด (marker) 
		var place = autocomplete.getPlace();// เก็บค่าสถานที่จากการใช้งาน autocomplete ไว้ในตัวแปร place
		if (!place.geometry) {// ถ้าไม่มีข้อมูลสถานที่ 
			return;
		}
		
		// ถ้ามีข้อมูลสถานที่  และรูปแบบการแสดง  ให้แสดงในแผนที่
		if (place.geometry.viewport) {
			map.fitBounds(place.geometry.viewport);
//			$("#lat_value").val(place.geometry.location.lat());
//			$("#lng_value").val(place.geometry.location.lng());
			my_Marker.setPosition(place.geometry.location);  
		} else { // ให้แสดงแบบกำหนดเอง
			map.setCenter(place.geometry.location);
			map.setZoom(17);  // แผนที่ขยายที่ขนาด 17 ถือว่าเหมาะสม
		}
		
		// ปักหมุด (marker) ตำแหน่ง สถานที่ที่เลือก
        $("#lat_value").val(place.geometry.location.lat());
        $("#lng_value").val(place.geometry.location.lng());        
		my_Marker.setPosition(place.geometry.location);
		my_Marker.setVisible(true);// แสดงตัวปักหมุด จากการซ่อนในการทำงานก่อนหน้า
		
		// สรัางตัวแปร สำหรับเก็บชื่อสถานที่ จากการรวม ค่าจาก array ข้อมูล
		var address = '';
		if (place.address_components) {
			address = [
				(place.address_components[0] && place.address_components[0].short_name || ''),
				(place.address_components[1] && place.address_components[1].short_name || ''),
				(place.address_components[2] && place.address_components[2].short_name || '')
			].join(' ');
		}
		
		// แสดงข้อมูลในตัวปักหมุด (infowindow)
		infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
		infowindow.open(map, my_Marker);// แสดงตัวปักหมุด (infowindow)
		
	});
}




$(function(){
	$("<script/>", {
	  "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize&libraries=places"
	}).appendTo("body");	
});
</script>
</body>
</html>

ninenik 1.47.136.xxx 03-10-2015

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

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

Boomzaclub 1.47.10.xxx 03-10-2015 11:04

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

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

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