【问题标题】:Google Maps API V3 not showing mapGoogle Maps API V3 不显示地图
【发布时间】:2012-07-17 14:52:17
【问题描述】:

好的,所以我有一个 PHP 脚本来处理文件上传,特别是 KML 文件,提取上传文件的中心点和位置,将这些详细信息保存在文本文件中,然后通过“标题”加载另一个页面。然后,此其他页面使用 AJAX 调用来设置从文本文件中收集的变量名称,用于 KML 文件的位置和中心点,以便调用 Google Maps API 在地图上显示 KML 图层。

这是应该发生的事情,但什么都没有出现。我浏览我的 KML 文件,点击上传按钮,然后显示一个空白页面。当我检查我的服务器时,文件已上传,相关详细信息已写入各自的文本文件,所以当我尝试调用 Google Maps API 时显然出现了问题。

PHP 上传和文件信息保存:

<?php
//Check that we have a file
if((!empty($_FILES["UploadedFile"])) && ($_FILES['UploadedFile']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 3Mb
  $filename = basename($_FILES['UploadedFile']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  if (($ext == "kml") && ($_FILES["UploadedFile"]["size"] < 3145728)) {
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/kml/'.$filename;
      //Check if the file with the same name is already exists on the server
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['UploadedFile']['tmp_name'],$newname))) {
           findCenter($newname);
           saveName($newname);
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["UploadedFile"]["name"]." already exists";
      }
  } else {
     echo "Error: Only .kml files under 3Mb are accepted for upload";
  }
} else {
 echo "Error: No file uploaded";
}

function findCenter($file) {
   $kmlContent = file_get_contents($file);

   $startName = "#sh_green-circle";
   $endName = "#sh_red-circle";
   $startCoords = getCoords($kmlContent, $startName);
   $endCoords = getCoords($kmlContent, $endName);

   $startLat = substr($startCoords, strrpos($startCoords, ',') +1);
   $startLong = substr($startCoords, 0, strrpos($startCoords, ','));

   $endLat = substr($endCoords, strrpos($endCoords, ',') +1);
   $endLong = substr($endCoords, 0, strrpos($endCoords, ','));

   $midLat = ($startLat+$endLat)/2;
   $midLong = ($startLong+$endLong)/2;

   $midCoord = "$midLat,$midLong";

   $saveCenter = "kmlcenter.txt";
   $fh = fopen($saveCenter, 'w') or die ("Can't create file");
   $stringData = $midCoord;
   fwrite($fh, $stringData);
   fclose($fh);
}

function getCoords($kml, $name) {
   $startSearch = strpos($kml, $name);
   $midSearch = strpos($kml, "<coordinates>", $startSearch+1);
   $endSearch = strpos($kml, "</coordinates>", $midSearch+1);

   $longlat = substr($kml, $midSearch+13, $endSearch-($midSearch+13));
   return $longlat;
}

function saveName($filename) {
   $saveFile = "kmlfilename.txt";
   $fh = fopen($saveFile, 'w') or die("Can't create file");
   $stringData = "$filename";
   fwrite($fh, $stringData);
   fclose($fh);
   header("Location: initgmaps.html");
}
?>

地图初始化:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8P7CzxiwQFf-RdK9QVRpH9se8AsMSsjEsensor=false"></script>
<script type="text/javascript">
function initialize() {
  var kmlName = getName()
  var kmlCoords = getCoords()
  var mapcenter = new google.maps.LatLng(kmlCoords);
  var myOptions = {
    zoom: 11,
    center: mapcenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("infoArea"), myOptions);

  var kmlLayer = new google.maps.KmlLayer(kmlName);
  kmlLayer.setMap(map);
}
</script>

相关AJAX函数:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function getName(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    var kmlName;
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser does not support AJAX.");
                return false;
            }
        }
    }
       // Create a function that will receive data sent from the server
       ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
               kmlName = ajaxRequest.responseText;   
               }
       }
       ajaxRequest.open("GET", "kmlfilename.txt", false);
       ajaxRequest.send(null);
}
//-->

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function getCoords(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    var kmlCoords;
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser does not support AJAX.");
                return false;
            }
        }
    }
       // Create a function that will receive data sent from the server
       ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
               kmlCoords = ajaxRequest.responseText;   
               }
       }
       ajaxRequest.open("GET", "kmlcenter.txt", false);
       ajaxRequest.send(null);
}
//-->

当然在 initgmaps.html 的正文中我有:

onload="initialize()"

infoArea 是我的内嵌框架的 ID。

谁能看到它为什么不加载?我对网络开发完全陌生,边走边学,如果代码很糟糕,我很抱歉,我确信我犯了一些明显的错误。非常感谢。

【问题讨论】:

    标签: php html ajax google-maps-api-3 kml


    【解决方案1】:
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8P7CzxiwQFf-RdK9QVRpH9se8AsMSsjEsensor=false"></script>
    

    你在这里错过了一个&符号......应该是:

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=[[YOUR-GMAPS-KEY]]&sensor=false"></script>
    

    (其中 [[YOUR-GMAPS-KEY]] 是您的 Google 地图密钥 - “AIzaSyB8P7CzxiwQFf-RdK9QV...”。)

    【讨论】:

    • 哦,天哪,真是个愚蠢的错误,至少那一点是一个快速的解决方案。但是仍然没有显示任何内容:-/
    【解决方案2】:

    尝试在您的密钥之后和 sensor=false 参数之前添加一个 & 符号。

    另外

    var kmlCoords = getCoords()

    是 javascript,但函数 getCoords() 是 PHP。 Javascript 无法执行 PHP 函数。

    【讨论】:

    • getCoords 也是我的 AJAX 请求中的一个 javascript 函数。看到 PHP 和 javascript 看不到对方,这有关系吗?我已将 PHP 中的 getCoords() 更改为 findCoords() ,但仍然没有显示。
    • 我明白了...但是 javascript 函数 getCoords() 不返回任何内容。尝试添加 return kmlCoords。
    • 如果您想发布指向实时页面的链接,那么我们可以通过适当的调试器运行它。在这方面,我的浏览器比我的眼球要好得多。 :-)
    • 我有 Firebug,它告诉我“谷歌未定义”。愤怒。
    • paul.badtoro.co.uk/kmlfilename.txt 不包含有效的 KML 标记。可能还有其他问题,但这是第一个跳出来的问题。
    【解决方案3】:

    错误可能是由于不遵循此格式引起的:

    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"

    看,在“YOUR_API_KEY”之后不应该有“sensor=false”。 试试吧。希望它有效。

    【讨论】:

    • 请不要破坏您的回答。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-03
    • 2013-06-27
    • 2015-09-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多