谷歌地图不使用谷歌浏览器中的markercluster从ajax渲染标记答案

【问题标题】：Google maps not rendering markers from ajax with markercluster in Google Chrome谷歌地图不使用谷歌浏览器中的markercluster从ajax渲染标记
【发布时间】：2015-07-29 15:42:34
【问题描述】：

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

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

这只是谷歌浏览器的一个问题。我使用的是 Chrome 44 版。

【问题讨论】：

我在 Chrome 中尝试遇到 2 个问题：1：GET providersguide.com/markercluster.js 404（未找到）2：未捕获的语法错误：意外令牌非法（xmlhttp.onreadystatechange @ index1.php:69）
我不知道为什么 markercluster.js 会是 404（未找到）。当返回的标记很少时，它仍然会聚集标记。
ajax 脚本的输出大小会导致问题吗？我的脚本可以返回大约 500 个标记。
查看页面的源代码，你加载了这个文件两次，这不是一个好主意：<script type="text/javascript" src="markerclusterer.js"></script>
然后当我提交表单时，我得到一个通过 AJAX 加载的 JS 文件，该文件将近 5000 行！ 认真地 考虑重写生成此 JS 的 PHP 文件。这很可能是问题所在。

标签： google-maps google-chrome google-maps-markers markerclusterer

【解决方案1】：

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

结果是无效的js-code。

解决方案：

这一行：

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

不会产生预期的效果。请求是异步运行的，在执行这一行的那一刻响应还不可用，#mapgen的innerHTML是空的，什么都不做。

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

但是当你因为eval()responseText的大小而不能直接设置innerHTML时（在onreadystate-callback中）：

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 发送表单以加载标记，而不是返回脚本返回仅具有标记属性的 JSON（标记的创建可以在解析返回的 JSON 的循环中完成）

【讨论】：