Question

我想从我的数据库中显示多个点，我只得到一个带有控件和Google徽标/版权的灰色框我的代码如下，

<? 
    $dbname='usedb' ; //Name of the database 
    $dbuser='user' ; //Username for the db 
    $dbpass='pwd' ; //Password for the db 
    $dbserver='localhost' ; //Name of the mysql server 
    $dbcnx=m ysql_connect ( "$dbserver", "$dbuser", "$dbpass"); 
    mysql_select_db("$dbname") or die(mysql_error()); 
?>

  <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Google Map API V3 with markers</title>
        <style type="text/css">
            body {
                font: normal 10pt Helvetica, Arial;
            }
            #map {
                width: 350px;
                height: 300px;
                border: 0px;
                padding: 0px;
            }
            <script src="http://maps.googleapis.com/maps/api/js?API_KEY"></script>
            <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
            <script type="text/javascript"> 
                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: false,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                    },
                    navigationControl:true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    }
                });

            <? 
                $query=mysql_query("SELECT * FROM Devices");
                while ($row=mysql_fetch_array($query)) {
                    $name=$row['Hostname'];
                    $lat=$row['Latitude'];
                    $lon=$row['Longitude'];
                    $desc=$row['IPv4'];
                    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" style="height: 500px; width: 500px;"></div>
        </body>
</html>

任何人都可以告诉我我的代码有什么问题吗？任何帮助将/将不胜感激？

Answer 1

如评论所述，请关闭<style>标记，然后更改地图API参考，以便没有密钥。当我输入您的API参考时，我收到此错误：

Google已禁止将Maps API用于此应用程序。该提供的密钥不是有效的Google API密钥，或者未经授权对于此网站上的Google Maps Javascript API v3。如果你是您可以通过此应用程序的所有者了解获取有效密钥的信息这里： https://developers.google.com/maps/documentation/javascript/tutorial#api_key

只需输入<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

即可

这是一个很好的，有效的代码片段。以此为基础，将选项更改为您想要的选项。 “makeMarker”部分是您想从数据库中提取的部分。

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Google Map API V3 with markers</title>
 <style type="text/css">
 body { font: normal 10pt Helvetica, Arial; }
 #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
 </style>

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>

 </head>
 <body>
 <div id="map" style="height: 500px; width: 500px;">

<script type="text/javascript">

var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center: new google.maps.LatLng(20, 0) }; 
var map = new google.maps.Map(document.getElementById("map"), mapOpts); 
var infoWindow = new google.maps.InfoWindow(); 
var markerBounds = new google.maps.LatLngBounds(); 
var markerArray = []; 

function makeMarker(options) { 
  var pushPin = new google.maps.Marker({ map: map }); 
  pushPin.setOptions(options); 
  google.maps.event.addListener(pushPin, "click", 
  function () { infoWindow.setOptions(options); 
  infoWindow.open(map, pushPin); });
  markerBounds.extend(options.position); 
  markerArray.push(pushPin);
  return pushPin; } google.maps.event.addListener(map, "click", 
  function () { infoWindow.close(); }); 

      makeMarker({ title: "Test1", position: new google.maps.LatLng(10, 10), content: "Content1", icon: '' });
      makeMarker({ title: "Test2", position: new google.maps.LatLng(20, 20), content: "Content2", icon: '' });
      makeMarker({ title: "Test3", position: new google.maps.LatLng(30, 30), content: "Content3", icon: '' });

 </script>
 </div>
 </html>

Answer 2

1）google.maps.MarkerImage在V3中已弃用。请使用如下

 var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: {
          url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
          size: new google.maps.Size(10,10)
      }
  });

2）请添加以下监听器以加载Maps API。

google.maps.event.addDomListener(window, 'load', initMap);

上面的监听器将在页面加载时加载Map。 不要在页面加载方法中加载。

Answer 3

好的伙计们，这是我发现的：

在我的情况下，正如许多人之前提到的那样，在DIV中显示的内容只是一个灰色背景而不是地图。我在互联网上寻找答案，但找不到任何东西。我开始尝试代码中的每个元素，以便查看错误的位置。而且......这只是标签的一个问题！

让我解释一下;在我包括地图之前（我不知道它是由多个图像放在一起组成的），我在不同的功能中设置了前一个。我默认将这样的图像命令为（显示：“无”），这是错误发生的地方。我看不到地图，因为浏览器假定默认情况下不显示所有图像。

这很愚蠢，但也很简单。

我希望这可以在将来帮助你。

以下是适合所有人的屏幕截图

Google Maps API v3，灰盒子，没有地图

3 个答案: