Googlemap Layers

        หลังจากเปิดตัวการใช้งาน Openlayers ไปแล้วฟีดแบคกลับมาค่อนข้างดีมีหลายท่านชอบและนำไปใช้ จุดเด่นคือความง่ายและความยืดหยุ่น ผมก็พยายามจะเขียนคู่มือง่ายๆเพื่อให้สามารถนำไปฝึกใช้งานกัน แต่คงจะใช้เวลาสักระยะหนึ่งเนื่องจากช่วงนี้กำลังก้มหน้าก้มตาทำ thesis อยู่

       ในหัวข้อนี้ผมจะเขียนถึงการใช้ openlayers กับ google map โดยใน openlayers api ได้มี class สำหรับเชื่อมต่อกับ google map api อยู่แล้ว เพียงแค่ท่านนำ google map key ไปใส่ก็สามารถทำงานได้ทันทีเลย ตัวอย่างต่อไปนี้ผมจะสาธิตการใช้ google map layers โดยท่านสามารถเขียน code ได้ดังต่อไปนี้

<html >
  <head>
    <title>OpenLayers Google Layer Example</title>
    <link rel=”stylesheet” href=”http://openlayers.org/dev/theme/default/style.css” type=”text/css” />
    <style type=”text/css”>
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
        }
    </style>

<!– Google Map API Key –>
    <script src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ&#8217;></script>
    <script src=”http://openlayers.org/api/OpenLayers.js“></script>
    <script type=”text/javascript”>
        var map;

        function init() {
            //สร้่าง map object สำหรับ openlayers
            map = new OpenLayers.Map(‘map’);
            // กำหนดประเภทของ map control bar
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            // กำหนด layer type ของ google layers
            var gphy = new OpenLayers.Layer.Google(
                “Google Physical”,
                {type: G_PHYSICAL_MAP}
            );
            var gmap = new OpenLayers.Layer.Google(
                “Google Streets” // the default layers
            );
            var ghyb = new OpenLayers.Layer.Google(
                “Google Hybrid”,
                {type: G_HYBRID_MAP}
            );
            var gsat = new OpenLayers.Layer.Google(
                “Google Satellite”,
                {type: G_SATELLITE_MAP}
            );

            // เพิ่มชั้นข้อมูลประเภท google layers จาก google map ลงใน map object
            map.addLayers([gphy, gmap, ghyb, gsat]);
           // กำหนดตำแหน่งเริ่มต้นสำหรับแสดงผลแผนที่
            map.setCenter(new OpenLayers.LonLat(100.652, 13.737), 7);
        }
    </script>
  </head>
  <body onload=”init()”>
    <h1 id=”title”>Google Layer Demo</h1>

    <div id=”tags”></div>

    <p id=”shortdesc”>
       ตัวอย่าง Google Map Layers on Openlayers Application
    </p>

    <div id=”map”></div>
  </body>
</html>

 

-

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

บลอกที่ WordPress.com .

Up ↑

%d bloggers like this: