|
 |
| |
อยากรู้วิธีดึงแผนที่จาก google map มาใช้และการเพิ่มลบแก้ไขตำแหน่งและการปักหมุดแต่ละพื้นที่และเก็บข้อมูลลง db |
| |
 |
|
|
 |
 |
|
ขอบคุณครับผมม 
|
 |
 |
 |
 |
| Date :
2013-01-20 14:54:06 |
By :
leksoft |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
\("▔□▔)/
เฮ็ดแล้วกะเอามาให้หมู่เบิ่งนำแหน่ะเด้อ
|
| |
|
|
| |
| Date :
2013-01-20 15:02:26 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 
|
| |
|
|
| |
| Date :
2013-01-20 19:46:52 |
By :
leksoft |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
https://www.thaicreate.com/community/googlemap-v3-geocode-deawx-jquery.html หา latitude longtitude
พี่ทำไม่ได้อะ
พี่แนะนำกชด้วยนะคะ จะรีบส่งงานอาจารย์คะ
|
| |
|
|
| |
| Date :
2017-05-01 00:39:33 |
By :
ss |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code
Code (JavaScript)
<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="http://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()
}
}));
})
},
select: 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);
}
});
});
google.maps.event.addListener(marker, 'drag', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
}
}
});
});
});
</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>
พี่ต้องใส่ตรงไหน api
ต้องเพิ่มอะไรบ้าง
จาก No.6
|
| |
|
|
| |
| Date :
2017-05-03 15:40:01 |
By :
sss |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้อ่านลิงค์ของผมให้ไปแล้วใช่ไหมครับ
<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="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK3RgqSLy1toc4lkh2JVFQ5ipuRB106vU&"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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()
}
}));
})
},
select: 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);
}
});
});
google.maps.event.addListener(marker, 'drag', function () {
geocoder.geocode({
'latLng': marker.getPosition()
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
}
}
});
});
});
</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>
ตัวอย่าง http://jsbin.com/gakezas
|
ประวัติการแก้ไข
2017-05-06 12:02:15
| |
|
|
| |
| Date :
2017-05-06 12:00:25 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คะขอบคุณพี่มากนะ คะ deawx
ทำได้แล้วคะ
จาก No.6
|
| |
|
|
| |
| Date :
2017-05-07 18:09:01 |
By :
ss |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
สอนผมนำแน่อ้ายเดียว
|
| |
|
|
| |
| Date :
2017-05-07 22:25:54 |
By :
LAGO |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
สอนอิหยังหละท่านลักโอ LAGO
|
| |
|
|
| |
| Date :
2017-05-07 23:30:57 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
