2016年5月26日 星期四

PHP 教學 - 有趣的 google map api 應用

php 如何應用 google map api 呢?
首先應該在 mysql 中建立欄位

CREATE TABLE wholocations (
  id int(11) NOT NULL auto_increment,
  lat decimal(10,6) NOT NULL default '0.000000',
  lon decimal(10,6) NOT NULL default '0.000000',
  description varchar(255) NOT NULL default '',
  PRIMARY KEY  (id)
) ;

然後記得去建立幾筆資料

去申請 google map api key

<html>
<head>
<title>字串</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=你的key" type="text/javascript"></script>
</head>
    <body>
    <div style ="text-align:center;">
    <p><strong>gmap</strong></p>
   
    <div id="map" style="width: 800px; height: 600px;"></div>
    <script type="text/javascript">
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.setCenter(new GLatLng(25.074223,121.577818), 15, G_NORMAL_MAP);
        // Creates a marker whose info window displays the given number
        function createMarker(point, number)
        {
            var marker = new GMarker(point);
            // Show this markers index in the info window when it is clicked
            var html = number;
            GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
            return marker;
        };
        <?php
        $link = mysql_connect("localhost", "帳號", "密碼") or die("Could not connect: " . mysql_error());
        mysql_selectdb("gmap",$link) or die ("Can\'t use dbmapserver : " . mysql_error());
        mysql_query("SET NAMES 'utf8'", $link);
        $result = mysql_query("SELECT * FROM wholocations",$link);
        if (!$result)
            {
                echo "no results ";
            }
        while($row = mysql_fetch_array($result))
            {
            echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");\n";
            echo "var marker = createMarker(point, '" . addslashes($row['description']) . "');\n";
            echo "map.addOverlay(marker);\n";
            echo "\n";
            }

        mysql_close($link);
        ?>
    </script></div>
    </body>
</html>
如果沒問題應該會出現下列網頁樣子

1 則留言: