|
 |
| |
สอบถามเรื่อง google map api ครับ คือผมอยากให้มันอ่านค่า ตำแหน่งปลายทาง จาก Database |
| |
 |
|
|
 |
 |
|
คือตอนนี้ผมเขียน Code เดินทางจาก ตำแหน่งปัจจุบัน ไปยังตำแหน่งปลายทางได้แล้ว ทีนี้ผมต้องการเปลี่ยนให้ มัน search ผ่านจากตัว Database ที่เก็บ id name lat long score คือตอนนี้มัน search ค่าจากตำแหน่งใน google อยู่ครับ ผมเขียน conect ไว้แล้ว แล้วก็ select ตอนดึงค่านี่แหละครับ ดึงมาใช้ไม่เป็น เท่าไหร่ ยัง งงๆ อยู่ คือมันต้องเพิ่ม fuction อีกป่าวครับ
Code (JavaScript)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/myMap.css">
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script src="js/Location.js"></script>
</head>
<body>
<div id="floating-panel">
<b>Search: </b>
<input type="text" id="end">
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADfDBMzx6Yr7WAPdRZSiyqCynYNcsvqIQ&callback=initMap">
</script>
</body>
</html>
// js
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 13.76172844995000, lng: 100.6527900695800}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
// document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
directionsService.route({
origin: pos["lat"]+","+pos["lng"] ,
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
});//end navi
}
Tag : PHP, HTML, HTML5, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2018-01-28 20:22:43 |
By :
padchadayni |
View :
977 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
แทรก php เข้าไปได้เลยครับ
Code (JavaScript)
center: {lat: <?=$lat?>, lng: <?=$lng?>}
|
| |
|
|
| |
| Date :
2018-01-30 15:13:04 |
By :
mongkon.k |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ยังไงครับพี่ ผมยังงงยุเลย
|
| |
|
|
| |
| Date :
2018-02-05 19:56:08 |
By :
padchadayni |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
