2013-03-26 90 views
-1

我使用谷歌地圖來創建一個動態谷歌地圖,使用php mysql存儲在數據庫中的位置(緯度,經度),並通過地圖上的標記顯示所選位置 ,但問題是我得到沒有別的 用藍色顯示的地圖,如果有人能幫助我,我會理解,php + mysql +谷歌地圖

map.php

<?php 
$conn = mysql_connect("localhost", "****", "*****") or die(mysql_error()); 
mysql_select_db("map") or die(mysql_error()); 
?> 

    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
     <title>Google Maps</title> 
     <style type="text/css"> 
      body { font: normal 10pt Helvetica, Arial; } 
      #map { width: 350px; height: 300px; border: 0px; padding: 0px; } 
     </style> 
     <script src="http://maps.google.com/maps/api/js?key=mykey&sensor=false" type="text/javascript"></script> 
     <script type="text/javascript"> 
      //Sample code written by August Li 
      var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", 
         new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
         new google.maps.Point(16, 32)); 
      var center = null; 
      var map = null; 
      var currentPopup; 
      var bounds = new google.maps.LatLngBounds(); 
      function addMarker(lat, lng, info) { 
       var pt = new google.maps.LatLng(lat, lng); 
       bounds.extend(pt); 
       var marker = new google.maps.Marker({ 
        position: pt, 
        icon: icon, 
        map: map 
       }); 
       var popup = new google.maps.InfoWindow({ 
        content: info, 
        maxWidth: 300 
       }); 
       google.maps.event.addListener(marker, "click", function() { 
        if (currentPopup != null) { 
         currentPopup.close(); 
         currentPopup = null; 
        } 
        popup.open(map, marker); 
        currentPopup = popup; 
       }); 
       google.maps.event.addListener(popup, "closeclick", function() { 
        map.panTo(center); 
        currentPopup = null; 
       }); 
      }   
      function initMap() { 
       map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(0, 0), 
        zoom: 14, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
        }, 
        navigationControl: true, 
        navigationControlOptions: { 
         style: google.maps.NavigationControlStyle.ZOOM_PAN 
        } 
       }); 
<?php 
$query = mysql_query("SELECT * FROM poi_example")or die(mysql_error()); 
while($row = mysql_fetch_array($query)) 
{ 
    $name = $row['name']; 
    $lat = $row['lat']; 
    $lon = $row['lon']; 
    $desc = $row['desc']; 



    echo("addmarker($lat, $lon, '<b>$name</b><br />$desc');\n"); 

} 

?> 
center = bounds.getCenter(); 
    map.fitBounds(bounds); 

    } 
    </script> 
    </head> 
    <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> 
    <div id="map"></div> 
    </body> 
    </html> 

數據庫

CREATE TABLE IF NOT EXISTS `poi_example` (
    `id` int(11) NOT NULL AUTO_INCREMENT, 
    `name` text NOT NULL, 
    `desc` text NOT NULL, 
    `lat` text NOT NULL, 
    `lon` text NOT NULL, 
    PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; 

-- 
-- Dumping data for table `poi_example` 
-- 

INSERT INTO `poi_example` (`id`, `name`, `desc`, `lat`, `lon`) VALUES 
(1, '100 Club', 'Oxford Street, London W1&lt;br/&gt;3 Nov 2010 : Buster Shuffle&lt;br/&gt;', '51.514980', '-0.144328'), 
(2, '93 Feet East', '150 Brick Lane, London E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;', '51.521710', '-0.071737'), 
(3, 'Adelphi Theatre', 'The Strand, London WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies', '51.511010', '-0.120140'), 
(4, 'Albany, The', '240 Gt. Portland Street, London W1W 5QU', '51.521620', '-0.143394'), 
(5, 'Aldwych Theatre', 'Aldwych, London WC2B 4DF&lt;br/&gt;11 Oct 2010 : Dirty Dancing', '51.513170', '-0.117503'), 
(6, 'Alexandra Palace', 'Wood Green, London N22&lt;br/&gt;30 Oct 2010 : Lynx All-Nighter', '51.596490', '-0.109514'); 
+0

如果縮小你很可能會發現自己離開了非洲西海岸。 – deceze 2013-03-26 09:39:49

+0

好吧,現在我可以看到地圖,但沒有從數據庫中選擇任何標記 – user2205838 2013-03-26 09:42:14

回答

4

這是應該的(遺憾的縮進):

<?php 
$conn = mysql_connect("localhost:4040", "xxxx", "xxxx") or die(mysql_error()); 
mysql_select_db("test") or die(mysql_error()); 
?> 

    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
     <title>Google Maps</title> 
     <style type="text/css"> 
      body { font: normal 10pt Helvetica, Arial; } 
      #map { width: 350px; height: 300px; border: 0px; padding: 0px; } 
     </style> 
     <script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxx&sensor=false" type="text/javascript"></script> 
     <script type="text/javascript"> 
      //Sample code written by August Li 
      var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", 
         new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
         new google.maps.Point(16, 32)); 
      var center = null; 
      var map = null; 
      var currentPopup; 
      var bounds = new google.maps.LatLngBounds(); 
      function addMarker(lat, lng, info) { 
       var pt = new google.maps.LatLng(lat, lng); 
       bounds.extend(pt); 
       var marker = new google.maps.Marker({ 
        position: pt, 
        icon: icon, 
        map: map 
       }); 
       var popup = new google.maps.InfoWindow({ 
        content: info, 
        maxWidth: 300 
       }); 
       google.maps.event.addListener(marker, "click", function() { 
        if (currentPopup != null) { 
         currentPopup.close(); 
         currentPopup = null; 
        } 
        popup.open(map, marker); 
        currentPopup = popup; 
       }); 
       google.maps.event.addListener(popup, "closeclick", function() { 
        map.panTo(center); 
        currentPopup = null; 
       }); 
      }   
      function initMap() { 
       map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(0, 0), 
        zoom: 14, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
        }, 
        navigationControl: true, 
        navigationControlOptions: { 
         style: google.maps.NavigationControlStyle.ZOOM_PAN 
        } 
       }); 
<?php 
$query = mysql_query("SELECT * FROM poi_example")or die(mysql_error()); 
while($row = mysql_fetch_array($query)) 
{ 
    $name = $row['name']; 
    $lat = $row['lat']; 
    $lon = $row['lon']; 
    $desc = $row['desc']; 



    echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n"); 

} 

?> 
center = bounds.getCenter(); 
    map.fitBounds(bounds); 

    } 
    </script> 
    </head> 
    <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> 
    <div id="map"></div> 
    </body> 
    </html> 

的問題是:addmarker在函數定義調用VA addMarker(JS是區分大小寫)

+0

男人現在它不顯示任何東西,即使谷歌地圖 – user2205838 2013-03-26 10:24:27

+0

對不起,我沒有改變bd名稱,非常感謝 – user2205838 2013-03-26 10:27:26