ถ้าชอบภาพยนตร์สืบสวนสอบสวนอย่าง cis, ncis อาจจะคุ้นกับการลากจุดศูนย์กลางของเสาสัญญาน 3 เสา เพื่อหาว่าคนร้ายโทรมาจากที่ไหน หรือ ใน criminal minds จะใช้การลากเส้นจุดก่อเหตุดูว่าคนร้ายอยู่ที่ไหน
จากตัวอย่างที่แล้ว ๆ มาจุดที่ mark ไว้มันมันกระจัดกระจาย ถึงจะเริ่มต้นโดยการเลือกโรงพญาบาลบริเวณอนุสาวรีย์ชัยสมรภูมิ แต่กลับดูกระจัดกระจาย การจัด setCenter ใหม่จะทำให้เห็นได้ชัดเจนขึ้นโดยใช้หลักการเดียวกัน
การหาจุดศูนย์กลางทำได้โดยใช้
function getCenter (map, places) {
$X = 0.0;
$Y = 0.0;
$Z = 0.0;
var placesLength = places.length;
for (var a = 0; a < placesLength; a++) {
place = places[a];
$lat = place.latitude * Math.PI / 180;
$lon = place.longitude * Math.PI / 180;
$a = Math.cos ($lat) * Math.cos ($lon) ;
$b = Math.cos ($lat) * Math.sin ($lon) ;
$c = Math.sin ($lat) ;
$X += $a;
$Y += $b;
$Z += $c;
}
$X /= placesLength;
$Y /= placesLength;
$Z /= placesLength;
$lon = Math.atan2 ($Y, $X) ;
$hyp = Math.sqrt ($X * $X + $Y * $Y) ;
$lat = Math.atan2 ($Z, $hyp) ;
var latitude = $lat * 180 / Math.PI;
var longitude = $lon * 180 / Math.PI;
var latlng = new google.maps.LatLng (latitude, longitude) ;
map.setCenter (latlng) ;
var marker = new google.maps.Marker ({
"map": map,
"position": latlng,
}) ;
var infowindow = new google.maps.InfoWindow ({
"content": "setCenter Latitude = " + latitude + ", " + " longitude = " + longitude,
"position": latlng,
}) .open (map, marker) ;
}
และเช่นเดียวกับเรื่องอื่น คุณดูตัวอย่างได้จาก google maps: setCenter หรือจะเขียน code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps APIs > Maps JavaScript API > Markers > setCenter</title>
<link href="../../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="map" id="mapA"></div>
<br>
<button class="btn" id="deleteBtn" type="button">Delete Marker</button>
<script src="../../vendor/components/jquery/jquery.min.js"></script>
<script>
var map;
var overlays = [];
var places = [{
"latitude": 13.7485809,
"longitude": 100.5832588,
"name_en": "Bangkok Hospital",
"name_th": "โรงพยาบาล กรุงเทพ ซอยศูนย์วิจัย"
}, {
"latitude": 13.746166,
"longitude": 100.552348,
"name_en": "Bumrungrad International Hospital",
"name_th": "โรงพยาบาล บำรุงราษฎร์"
}, {
"latitude": 13.7679658,
"longitude": 100.5345264,
"name_en": "Phramongkutklao Hospital",
"name_th": "โรงพยาบาลพระมงกุฎเกล้า"
},
{
"latitude": 13.7561676,
"longitude": 100.5391023,
"name_en": "Phyathai 1 Hospital",
"name_th": "โรงพยาบาล พญาไท 1"
}, {
"latitude": 13.7698357,
"longitude": 100.5404377,
"name_en": "Phyathai 2 Hospital",
"name_th": "โรงพยาบาล พญาไท 2 อินเตอร์เนชันแนล"
},
{
"latitude": 13.769295,
"longitude": 100.527455,
"name_en": "Prasat Neurological Hospital and Institute",
"name_th": "สถาบันประสาทวิทยา"
}, {
"latitude": 13.76188,
"longitude": 100.526455,
"name_en": "Priest Hospital",
"name_th": "โรงพยาบาลสงฆ์"
}, {
"latitude": 13.7659465,
"longitude": 100.5353223,
"name_en": "Queen Sirikit National Institute of Child Health",
"name_th": "สถาบันสุขภาพเด็กแห่งชาติมหาราชินี"
}, {
"latitude": 13.7642952,
"longitude": 100.5367674,
"name_en": "Rajavithi Hospital",
"name_th": "โรงพยาบาล ราชวิถี"
},
{
"latitude": 13.766015,
"longitude": 100.5267864,
"name_en": "Ramathibodi Hospital",
"name_th": "โรงพยาบาลรามาธิบดี"
},
{
"latitude": 13.7657804,
"longitude": 100.5333703,
"name_en": "TropMed Hospital for Tropical Diseases - Faculty of Tropical Medicine, Mahidol University",
"name_th": "โรงพยาบาล เวชศาสตร์เขตร้อน ม.มหิดล"
}, {
"latitude": 13.7719828,
"longitude": 100.5515745,
"name_en": "Veterans General Hospital",
"name_th": "โรงพยาบาล ทหารผ่านศึก"
}, {
"latitude": 13.7831277,
"longitude": 100.5336353,
"name_en": "Vichaiyut Hospital (North Building) ",
"name_th": "โรงพยาบาล วิชัยยุทธ"
}, {
"latitude": 13.7804061,
"longitude": 100.5330211,
"name_en": "Vichaiyut Medical Center",
"name_th": "ศูนย์การแพทย์วิชัยยุทธ"
}, {
"latitude": 13.7600024,
"longitude": 100.534462,
"name_en": "Bhumirajanakarindra Kidney Institute Hospital",
"name_th": "โรงพยาบาล สถาบันโรคไตภูมิราชนครินทร์"
}
];
/* function createMaps */
function createMap (mapArea, position) {
var latlng = new google.maps.LatLng (parseFloat (position.latitude) , parseFloat (position.longitude)) ;
map = new google.maps.Map (document.getElementById (mapArea) , {
"zoom": 18
}) ;
map.setCenter (latlng) ;
var marker = new google.maps.Marker ({
"map": map,
"position": latlng,
}) ;
var infowindow = new google.maps.InfoWindow ({
"content": 'Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude,
"position": latlng,
}) .open (map, marker) ;
}
function deleteOverlays () {
var overlaysLength = overlays.length;
if (overlaysLength > 1) {
for (var a = 0; a <= overlays.length; a++) {
if (typeof overlays[a] !== 'undefined') {
overlays[a].setMap (null) ;
}
}
}
overlays = [];
}
function getCenter (map, places) {
$X = 0.0;
$Y = 0.0;
$Z = 0.0;
var placesLength = places.length;
for (var a = 0; a < placesLength; a++) {
place = places[a];
$lat = place.latitude * Math.PI / 180;
$lon = place.longitude * Math.PI / 180;
$a = Math.cos ($lat) * Math.cos ($lon) ;
$b = Math.cos ($lat) * Math.sin ($lon) ;
$c = Math.sin ($lat) ;
$X += $a;
$Y += $b;
$Z += $c;
}
$X /= placesLength;
$Y /= placesLength;
$Z /= placesLength;
$lon = Math.atan2 ($Y, $X) ;
$hyp = Math.sqrt ($X * $X + $Y * $Y) ;
$lat = Math.atan2 ($Z, $hyp) ;
var latitude = $lat * 180 / Math.PI;
var longitude = $lon * 180 / Math.PI;
var latlng = new google.maps.LatLng (latitude, longitude) ;
map.setCenter (latlng) ;
var marker = new google.maps.Marker ({
"map": map,
"position": latlng,
}) ;
var infowindow = new google.maps.InfoWindow ({
"content": "setCenter Latitude = " + latitude + ", " + " longitude = " + longitude,
"position": latlng,
}) .open (map, marker) ;
}
function handleLocationError (browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition (pos) ;
infoWindow.setContent (browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.') ;
infoWindow.open (map) ;
}
function initMap (defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
position = {
"latitude": defaultLatitude,
"longitude": defaultLongitude,
};
createMap ('mapA', position) ;
setMarkers (map) }
function setMarkers (map) {
var placesLength = places.length;
for (var a = 0; a < placesLength; a++) {
var place = places[a];
var marker = new google.maps.Marker ({
"map": map,
"position": {
"lat": parseFloat (place.latitude) ,
"lng": parseFloat (place.longitude) },
"title": place.name_en + "\n" + place.name_th,
"zIndex": a
}) ;
overlays.push (marker) ;
}
getCenter (map, places) ;
}
$ (function () {
$ ('#deleteBtn') .click (function () {
deleteOverlays () ;
}) ;
}) ;
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDE5zb4r9sbN5S_GcD3NZRED1Ma3FzFqso"></script>
</body>
</html>