小贝子编程

(PHP / JS)Google Maps API 3在IE，FF和iPad(Safari / Chrome)中无法获得结果，但在Chrome和M8 Android(Native / Chrome)上



问题解释

这对我来说并不容易解释，因为我根本不确定发生了什么。基本上，我目前正在玩以下谷歌API：

  • 地理编码API

  • 谷歌地图JavaScript API v3

  • 地点API


我一直在Windows 7上使用Google Chrome，并成功地创建了一个使用Google Maps API V3的系统，该系统允许我根据通过Google Geocoder发送给定位置时创建的Geocoded LatLng搜索某个位置并撤回该位置附近的业务。

这在我的电脑上谷歌浏览器运行良好，但在FireFox或Internet Explorer中不起作用。除此之外，它在我的Safari或Chrome iPad上也不起作用，但在我的HTC M8上，它在本地浏览器和Chrome上都起作用。

基本上，用户搜索一个位置(目前只在第二个输入框中搜索"Southport"，第一个框中没有任何内容)，并返回25公里内的企业列表。此搜索功能在Chrome中按预期返回结果，但不会返回结果，也不会将地图集中在正确的位置。

在搜索过程中生成了一个businesses xml模式。在FireFox中检查Firebug时，此项为空。

谷歌硬盘下载时，底部提供了系统工作时的外观和不工作时的样子的图像。。。您将需要HTTPS：

strong>地图的生成方式



最初load()是在加载时运行的：

<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 Maps 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 Map API之后，还会调用main.js和places.js，这些都不是硬编码的，在调用这个Google-Map.js之后，然后在所有这些之后，initialize()函数与其他提到的脚本一起被调用。

load()；结果调用了以下函数(顶部的变量是所有googlemap.js的公共变量)：

//<![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');
}
};
}



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

strong>获取结果

当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通过以下网址推送到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输出随后由Google-Map.js在searchLocationNear()中读取；

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() {}
//]]>


链接到站点

MyWorthy。服务

忽略第一个输入框，在第二个输入框中输入Southport并进行搜索。根据问题的介绍，它只适用于Chrome，而不是IE或Firefox等。


验证错误

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

[将此文档检查为HTML 4.01过渡时发现错误！][11]


我进行的研究链接

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

  1. 谷歌地图api 3与地方DEMO只在Chrome工作…为什么？-这个似乎最能描述我的处境

Firefox和IE9也会发生同样的情况…地图和元素都很好，但当你按下搜索时，会重置所有复选框，搜索框不会产生任何结果-有效地重置。

。。。评论中提到了，我觉得这就是我的问题所发生的事情，尽管我真的不确定。

2。[谷歌地图V3 JavaScript仅适用于Chrome？]

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

4。[谷歌地图API GeoJSON不适用于IE 11，但适用于Chrome]-此链接向我介绍了。。。

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

。。。不确定这是否会产生影响，我稍后一回家就会尝试，并将用我的发现更新这个问题(编辑：这似乎已经在我的代码中了)。

5。[存在与否有什么区别？]

6。[谷歌地图v2到v3 API包装器可在Chrome中使用，但不能在Firefox/IE中使用]

7。[谷歌地图V3 JavaScript仅适用于Chrome？]

8。〔谷歌地图API和Javascript问题。它在Firefox中完美工作，为什么不使用Internet Explorer？〕-有点无关，我一开始会认为错误只与IE有关，但我注意到了这一点。。。

好吧，我已经想通了。原来我的变量名有冲突。我通过将map-div-DOM元素从map重命名为其他元素来修复它。它现在在Firefox和IE中运行得很好。谢谢你在这里给我的帮助。

。。。这让我想到，也许我也将mapdiv DOM元素命名为"map"。编辑：尝试过这个，更改了一些名为"map"的位，但没有更改任何内容，但不确定它是否是DOM元素。

9。[谷歌地图api没有在Firefox和IE中显示，但在Chrome和safari中显示][9]-我在旅行中也多次看到这个错误，但我不认为是这种情况发生了，但我可能错了。基本上，在FF和IE中，由于CSS错误，一些用户会在地图所在的地方得到一个灰色框。实际上我看到的是以美国为中心的地图。

所以。。。请帮忙

如果对这个问题、布局、研究等有任何反馈，我将不胜感激，这样我就可以学习如何真正为StackOverflow做出贡献。

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


---------------请查看由于只允许2个URL而无法添加的问题的链接---------------

2：http://gotoanswer.com/?q=Google+地图+V3+JavaScript+工作+仅限+在+Chrome%3F中

3:http://stackoverflow.com/questions/19693799/php-code-works-on-chrome-but-not-on-firefox-or-ie

4:http://stackoverflow.com/questions/26678721/google-maps-api-geojson-not-working-with-ie-11-but-works-in-chrome

5:http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

6:http://stackoverflow.com/questions/20099944/google-maps-v2-to-v3-api-wrapper-working-in-chrome-but-not-in-firefox-ie

7:http://stackoverflow.com/questions/9760727/google-maps-v3-javascript-works-only-in-chrome

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

9:http://groups.google.com/forum/#！主题/谷歌地图api/50z4juKrYEM

11:http://validator.w3.org/check?uri=http%3A%2F%2Fmyworthy.services%2Fsearch.php&charset＝%28detect+自动%29&doctype=内联&ss＝1&outline＝1&组＝1&No200＝1&st＝1&用户代理=W3C_Validator%2F1.3+http%3A%2F%2Validator.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

您的问题是在"search.php"中使用的window.onload。对我来说，它不会在IE10或Firefox中启动，但会在Chrome上启动。我没有找到内容和位置，但我确信在您的代码或包含的某个库中的其他地方还有其他使用window.onload的内容。这不会起作用，只有分配给window.onload的最后一个回调才会真正启动。阅读此：使用window.onload 的最佳实践

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium