Google 地图不渲染来自 ajax 的标记，在 Google Chrome 中使用 markercluster

Question

我有一个使用 google 地图的网站。 google 地图的标记数据由 ajax 从服务器检索。我使用 markerclusterer 来限制一次出现在地图上的标记的数量。在 Chrome 上，如果返回的标记超过 30 个，google 地图将变为空白。该地图在 Firefox 和 Internet Explorer 中运行良好。对出了什么问题有什么想法吗？

这是一个有问题的页面providersguide.com/index1.php从下拉菜单中进行任意选择并点击搜索以加载标记数据。

这只是 Google Chrome 中的一个问题。我使用的是 Chrome.

的第 44 版

Answer 1

问题的根源在于innerHTML的设置，Chrome中似乎有大小限制，参见innerHTML size limit

结果是无效的js代码。

解决方案：

这一行：

 eval(document.getElementById("mapgen").innerHTML);

不会有预期的效果。 Request是异步运行的，执行这一行的时候还没有响应，#mapgen的innerHTML是空的，什么都不会做。

基本上你根本不需要使用eval，因为脚本会在你设置innerHTML时自动执行。

但是当你因为 eval() 的大小而无法设置 innerHTML 时 responseText 直接（在 onreadystate-回调中）：

window.onload = function()
{

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    eval(xmlhttp.responseText);

    }
  }
xmlhttp.open("GET","the/desired/url",true);
xmlhttp.send();
}

但是，当前加载标记的方法并不值得推荐。您发送一个表单，加载一个新页面并发送另一个请求以加载必须评估的大型脚本。

您最好通过 AJAX 发送表单以加载标记，而不是 return 编写脚本 return 一个 JSON 仅具有标记属性（标记的创建可以在你解析 returned JSON)

的循环中完成

Google 地图不渲染来自 ajax 的标记，在 Google Chrome 中使用 markercluster

Google maps not rendering markers from ajax with markercluster in Google Chrome

google-maps

google-chrome

google-maps-markers

markerclusterer