(PHP / JS) Google 地图 API 3 在 IE、FF 和 iPad (Safari / Chrome) 中没有得到结果，但在 Chrome & M8 Android（原生/Chrome）

Question

问题说明

这对我来说不是一件容易解释的事情，因为我完全不确定发生了什么。基本上我目前正在玩以下 Google APIs:

地理编码API

Google 地图 JavaScript API v3

地方API

我一直在 Google Chrome Windows 7 上工作，并且已经成功地创建了一个使用 Google 地图的系统 API V3 并允许我搜索位置并根据通过 Google 地理编码器发送给定位置时创建的地理编码 LatLng 拉回该位置附近的企业。

这在我的 Google Chrome PC 上工作正常，但在 FireFox 或 Internet Explorer 中不工作。此外，它也不适用于我的 iPad 和 Safari 或 Chrome，但它确实适用于我的 HTC M8 的原生浏览器和 Chrome。

基本上，用户搜索一个位置（目前仅在第二个输入框中搜索 "Southport"，而在第一个输入框中没有任何内容）并获得 25 公里范围内的商家列表。此搜索功能 returns 在 Chrome 中的结果与预期的一样，但不会 return 结果或将地图放在正确位置的中心。

在搜索过程中产生了一个企业 xml 模式。在 FireFox 中通过 Firebug 检查时为空。

系统工作时的外观图像，以及系统不工作时的外观图像在底部作为 google 驱动器下载提供...您将需要 HTTPS：

地图是如何生成的

最初 load() 是运行 onload：

<body class="search" onload="load();">

这会触发 initialize();

运行的代码是：

function initialize() {
    var input = document.getElementById('loc');
    var options = {componentRestrictions: {}};
                 
    new google.maps.places.Autocomplete(input, options);
}
             
google.maps.event.addDomListener(window, 'load', initialize);

仅供参考：在此之后，调用了一些脚本，这些脚本包含在 Google API 中，我相信它们不是硬编码的（按顺序：common.js， util.js、geocoder.js、controls.js、places_impl.js、map.js、infowindow.js、onion.js、stats.js 和 marker.js).

就在调用上述脚本之前，我引用了 Google 映射 API。这再次添加了对其他未硬编码的 .js 文件的更多引用：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=EXAMPLE_APIKEY&amp;sensor=false&amp;libraries=places"></script>
<script src="https://maps.gstatic.com/maps-api-v3/api/js/20/5/main.js"></script>
<script src="https://maps.gstatic.com/maps-api-v3/api/js/20/5/places.js"></script>  
<script type="text/javascript" src="/library/inc/structure/business/widgets/google-map/google-map.js"></script>

正如您可能注意到的，在调用 Google 映射后 API、main.js 和 places.js 也被调用，这些都不是硬编码的，在 google- map.js 被调用，然后在所有这一切之下， initialize() 函数与其他提到的脚本一起被调用。

加载（）;导致调用以下函数（顶部的变量是所有 google-map.js 的 public 变量）：

//<![CDATA[
    var map;
    var businesses = [];
    var infoWindow;
    var locationSelect;

    function load() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(40, -100),
        zoom: 4,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      });
      infoWindow = new google.maps.InfoWindow();

      locationSelect = document.getElementById("locationSelect");
      locationSelect.onchange = function() {
        var businessNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (businessNum != "none"){
          google.maps.event.trigger(businesses[businessNum], 'click');
        }
      };
   }

这将创建地图，并在用户选择搜索结果中的位置时进行监听。

获取结果

当search.php 加载时，跟随函数是运行：

var $_POST = <?php echo json_encode($_POST); ?>;    

        function searchLocation() {
         var address = $_POST["loc"];
         var geocoder = new google.maps.Geocoder();
         geocoder.geocode({address: address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
            searchLocationsNear(results[0].geometry.location);
           } else {
             alert(address + ' not found');
           }
         });
       }
        window.onload = searchLocation;

依次运行 searchLocationNear(); :

function searchLocationsNear(center) {
     clearLocations();

     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = '/library/inc/structure/business/widgets/google-map/google-map.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var businessNodes = xml.documentElement.getElementsByTagName("business");
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < businessNodes.length; i++) {
        var business_id = businessNodes[i].getAttribute("business_id");
         var name = businessNodes[i].getAttribute("name");
         var address = businessNodes[i].getAttribute("address");
         createSearchResults(name, distance, i, business_id, address);
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
       locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var businessNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(businesses[businessNum], 'click');
       };
      });
    }

此 LatLng 通过 url 推送到 Google-Map.php：

/library/inc/structure/business/widgets/google-map/google-map.php?lat=' +     center.lat() + '&lng=' + center.lng() + '&radius=' + radius;

在 google-map.php 中发生以下情况：

$database="db_name";
$username="db_user";
$password="db_password";

$center_lat = $_GET["lat"];
$center_lng = $_GET["lng"];
$radius = $_GET["radius"];

// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("businesses");
$parnode = $dom->appendChild($node);

// Opens a connection to a mySQL server
$connection=mysql_connect ($database, $username, $password);
if (!$connection) {
  die("Not connected : " . mysql_error());
}

// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ("Can\'t use db : " . mysql_error());
}

// Search the rows in the markers table
$get_business_query = sprintf("SELECT business_id, address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM businesses HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",  mysql_real_escape_string($center_lat),  mysql_real_escape_string($center_lng),
  mysql_real_escape_string($center_lat),
  mysql_real_escape_string($radius));
$get_business_result = mysql_query($get_business_query);

if (!$get_business_result) {
  die("Invalid query: " . mysql_error());
}

header("Content-type: text/xml");
  
while ($get_business_row = @mysql_fetch_assoc($get_business_result))
{
  $businessID         = $get_business_row['business_id'];
 
  $node = $dom->createElement("business");
 
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("business_id", $get_business_row['business_id']);
  $newnode->setAttribute("name", $get_business_row['name']);
  $newnode->setAttribute("address", $get_business_row['address']);
}
echo $dom->saveXML();

一个聪明的 MySQL 查询然后计算出这些企业中哪些企业位于 25 公里半径范围内（这目前是硬编码的，但最终将成为一个选项）。

$get_business_query = sprintf("SELECT business_id, address, name, lat, lng,  ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM businesses HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",  mysql_real_escape_string($center_lat),  mysql_real_escape_string($center_lng),
  mysql_real_escape_string($center_lat),
  mysql_real_escape_string($radius));
$get_business_result = mysql_query($get_business_query);

然后迭代结果的行并为每个创建一个 XML 节点：

while ($get_business_row = @mysql_fetch_assoc($get_business_result))
{
  $businessID         = $get_business_row['business_id'];
 
  $node = $dom->createElement("business");
 
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("business_id", $get_business_row['business_id']);
  $newnode->setAttribute("name", $get_business_row['name']);
  $newnode->setAttribute("address", $get_business_row['address']);
}
echo $dom->saveXML();

生成的 XML 输出随后被 searchLocationNear() 中的 Google-Map.js 读取；

剩下的Google-Map.js如下：

function createMarker(latlng, name, address) {
      var html = "<b>" + name + "</b> <br/>" + address;
      var marker = new google.maps.Marker({
        map: map,
        position: latlng
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
      businesses.push(marker);
    }

    function createSearchResults(name, distance, num, business_id, address) {
      var li = document.createElement("li");
      li.value = num;
      li.setAttribute("onmouseover", "selectBusinessOnMap(" + num + ")");
      li.setAttribute("onmouseout", "deselectBusinessOnMap(" + num + ")");
      //Start Search Results ---------------------------------

      //Name
      li.innerHTML += "<div class=\"result-name\"><a href=\"/business/" + business_username + "\" \">" + (num + 1) + ". " + name + "</a></div>";

      //Distance
      li.innerHTML += "<div class=\"result-distance\">(" + distance.toFixed(1) + ")";
      

      //End Search Results ---------------------------------
      locationSelect.appendChild(li);
    }

    function selectBusinessOnMap(num) {
      
        var businessNum = num;
        google.maps.event.trigger(businesses[businessNum], 'click');

    }

    function deselectBusinessOnMap(num) {
      
        infoWindow.close();
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

    function doNothing() {}

    //]]>

Link 到站点

MyWorthy.Services

忽略第一个输入框，在第二个输入框中输入 Southport 并搜索。根据问题介绍，它只适用于 Chrome 对我来说，不适用于 IE 或 Firefox 等。

验证错误

几个验证错误引起了我的注意，但我不确定是否是原因，也不会通过 w3c 将任何值提交到搜索中，所以不确定这是否是某些错误的原因

[检查此文档时发现错误 HTML 4.01 T运行sitional!][11]

Link我进行的研究

Link 其他有类似问题的问题，由于我对问题实际发生的位置缺乏了解，我试图将其应用于我自己的情况但运气不佳：

Google maps api 3 with places DEMO works only in Chrome… why? - 这个似乎最能描述我的情况...

Same happens in Firefox and IE9... map and elements all fine, but when you press search resets all check boxes, search box and produces no results - effectively resets.

... 在评论中提到，我觉得这就是我的问题所发生的某种情况，尽管我真的不确定。

2. [Google Maps V3 JavaScript 仅适用于 Chrome?]

3. [PHP 代码适用于 Chrome，但不适用于 Firefox 或 IE]

4. [Google 地图 API GeoJSON 不适用于 IE 11，但在 Chrome] 中工作 - 这个 link 向我介绍了这个 ...

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

...不确定这是否会产生影响，我会在稍后回家后立即尝试，并会根据我的发现更新此问题（编辑：看来这已经在我的代码中）。

5.【存在与不存在有什么区别？】

6. [Google 将 v2 映射到 v3 API 包装器在 Chrome 中工作但在 Firefox / IE 中不工作]

7. [Google Maps V3 JavaScript 仅适用于 Chrome?]

8. [Google映射API和Javascript问题。它在 Firefox 中完美运行，为什么不在 Internet Explorer 中运行？] - 起初我认为有点不相关，因为错误仅在 IE 中出现，但我注意到了这一点 ...

okay i have figured it out. turned out I had a clash of variable names. I fixed it by renaming the map div DOM element from map to something else. it works great in Firefox and IE now. Thanks for all the help i did receive here.

...这让我觉得也许我也有名为 'map' 的地图 div DOM 元素。编辑：试过这个，改变了一些叫做 "map" 但没有改变任何东西，但不确定它是否是 DOM 元素。

9. [Google 地图 api 未在 Firefox 和 IE 中显示，但在 Chrome 和 safari 中显示][9] - 我在旅行中也多次看到此错误，但我不要认为这是正在发生的事情，但是我可能是错的。基本上在 FF 和 IE 中，一些用户会得到一个灰色框，其中地图应该是由于 CSS 错误。我实际上看到了以美国为中心的地图。

所以...请帮助...!!!

任何关于问题、布局、研究等的反馈都将不胜感激，因此我学习了如何真正为 Whosebug 做出贡献。

此外，任何帮助和建议都将不胜感激，因为我不知道从哪里开始解决这个问题，因为我真的不习惯只在 Chrome 中使用它！通常用于 IE 不工作！

------------ 请查看 links 以质疑我由于只允许 2 urls 而无法添加 ------ -----

2：http://gotoanswer.com/?q=Google+Maps+V3+JavaScript+works+only+in+Chrome%3F

3:

4:

5:

6:

7:

8: http://software.programming4.us/forums/t/101675.aspx

9: http://groups.google.com/forum/#!topic/google-maps-api/50z4juKrYEM

11: http://validator.w3.org/check?uri=http%3A%2F%2Fmyworthy.services%2Fsearch.php&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=1&No200=1&st=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

编辑

这是搜索 "Southport" 并获得结果时的样子：

！ http://drive.google.com/file/d/0B7Rzr6uvzmvAUVBfeWUzNU5FX0k/view?usp=sharing

当它在 FF 和 IE 中都不起作用时，它应该是这样的：

！ http://drive.google.com/file/d/0B7Rzr6uvzmvAdzlGTGhiQldpZmM/view?usp=sharing

Answer 1

您的问题与您在 "search.php" 中使用的 window.onload 有关。对我来说，它不会在 IE10 或 Firefox 中触发，但会在 Chrome 上触发。我没有找到什么和在哪里，但我很确定在您的代码或您包含的某些库中的其他地方还有其他使用 window.onload 的东西。那是行不通的，只有您分配给 window.onload 的最后一个回调才会真正触发。读这个：Best practice for using window.onload

(PHP / JS) Google 地图 API 3 在 IE、FF 和 iPad (Safari / Chrome) 中没有得到结果，但在 Chrome & M8 Android（原生/Chrome）

(PHP / JS) Google Maps API 3 not getting results in IE, FF & iPad (Safari / Chrome) but does on Chrome & M8 Android (Native / Chrome)

javascript

php

google-maps-api-3

google-places-api

google-geocoding-api