MENU
mobile-logo
Home / Developer  / Newbie  / Beginning  / เพิ่มภาพ Complex Marker บน Google Maps JavaScript API v3
Beginning Developer Featured Google Developers HTML5 JavaScript Newbie Programming Language

เพิ่มภาพ Complex Marker บน Google Maps JavaScript API v3

9:26 AM
2
1302Views

ตัวอย่างการใช้งาน Google Maps JavaScript API v3 ในการวางรูปภาพ Complex Marker ด้วยภาพกราฟิกนามสกุล png ลงไปใน Google Maps ให้น่าสนใจกว่า Marker ตัวเดิมวิธีการไม่ยากครับ แค่หาภาพมาวางซ้อน นามสกุล .png ก็พอ

สร้างไฟล์ index.html ขึ้นมา แล้วใส่ Code ดังนี้ครับ

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Heroes of Google Maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
 
function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(13.577082,100.590107)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
 
  setMarkers(map, beaches);
}
 
var beaches = [
  ['Bahamut', 13.607783,100.595085, 4],
  ['Heroes Company', 13.611453,100.549423, 5],
  ['River Battles', 13.577082,100.590107, 3],
  ['Temple of Dooms', 13.57508,100.573284, 2],
  ['Dragon Clan', 13.602277,100.559036, 1]
];
 
function setMarkers(map, locations) {
 
  var image = {
    url: 'images/heroes.png',
    size: new google.maps.Size(90, 39),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 39)
  };
 
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

ทดสอบนะครับ จะเห็นว่า ตัวอย่างที่ทำให้จะทำงานแบบนี้ครับ

Screen Shot 2557-02-12 at 4.51.46 PM

โคตรง่าย เพราะผมไม่ได้เขียนอะไรใหม่เลย นอกจากขนาด Width และ Height ของภาพกราฟิกผมแค่นั้นครับ

Java
1
2
3
4
5
6
7
var image = {
    url: 'images/heroes.png',
//90 คือขนาด Width ภาพ, 39 คือขนาด Height ภาพ
    size: new google.maps.Size(90, 39),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 39)
  };

ทดสอบได้ที่ http://www.daydev.com/demo/mapquest/

Comments

POST TAGS:

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: