การปรับเปลี่ยนมุมมอง (Map Type) บน Google Maps API

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

การปรับเปลี่ยนมุมมอง (Map Type) บน Google Maps API

โพสต์โดย Ik Kat » 03/07/2017 3:45 pm

การปรับเปลี่ยนมุมมอง Map Type สามารถทำได้โดยใช้ Google Maps JavaScript API ซึ่งมีให้เลือกใช้ได้ทั้งหมด 4 รูปแบบ ซึ่งแต่ล่ะรูปแบบมีมุมมองที่ต่างกัน ดังนี้

รูปแบบของ Map Type ที่อยู่บน Google Maps :
- roadmap displays มุมมองปกติ เป็นค่าเริ่มต้นที่สามารถมองได้ในรูปแบบ 2 มิติ
- satellite displays การแสดงภาพจากดาวเทียม
- hybrid displays เป็นการผสมระหว่างมุมมองปกติ และภาพจากดาวเทียม
- terrain displays เป็นแผนที่ทางภูมิศาสตร์

ตัวอย่าง ROADMAP :

โค้ด: เลือกทั้งหมด

var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
  zoom: 15,
  center: myLatlng,
  mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);


รูปภาพ

ตัวอย่าง SATELLITE :

โค้ด: เลือกทั้งหมด

var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
  zoom: 15,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);


รูปภาพ

ตัวอย่าง HYBRID :

โค้ด: เลือกทั้งหมด

var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
  zoom: 15,
  center: myLatlng,
  mapTypeId: 'hybrid'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);


รูปภาพ

ตัวอย่าง TERRAIN :

โค้ด: เลือกทั้งหมด

var myLatlng = new google.maps.LatLng(13.8380209, 100.5814654);
var mapOptions = {
  zoom: 15,
  center: myLatlng,
  mapTypeId: 'terrain'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);


รูปภาพ

โค้ด: เลือกทั้งหมด

การเปิดใช้งานและปิดใช้งานภาพ 45 องศา :

โค้ด: เลือกทั้งหมด

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 13.8380209, lng: 100.5814654},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}


    หากต้องการปิดให้ตั้งเป็น map.setTilt(0);
    หากต้องการเปิดให้ตั้งเป็น map.setTilt(45);

MT19 3-7-60(15).png
MT19 3-7-60(15).png (860.88 KiB) เปิดดู 14 ครั้ง


โค้ด: เลือกทั้งหมด

การหมุนภาพ 45 องศา :

โค้ด: เลือกทั้งหมด

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 13.8380209, lng: 100.5814654},
    zoom: 15,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน