jjzjj

javascript - Google Maps Marker Cluster示例

coder 2024-07-24 原文

我正在寻找一个google maps marker集群api v3的基本示例。我已经看过这个例子了，但是我做不好。请帮我举一个用这些数据绘制集群的例子：

var macDoList = [
  {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
  {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
  {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
  {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
  {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
];

代码：
<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer v3 Example</title>

    <style type="text/css">

      #map {
        width: 600px;
        height: 400px;
      }

    </style>

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];

          var macDoList = [
        {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
        {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
        {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
          {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
            {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
];

        for(var i=0;i<5;i++){
          console.log(macDoList[i].lat)
          var latLng = new google.maps.LatLng(macDoList[i].lat,
              macDoList[i].lng);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>

    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

最佳答案

报告了一个错误：

Uncaught ReferenceError: MarkerClusterer is not defined

因为库markerclusteres.js不包括在内。你必须这样做：
<script src='../../js/markerclusterer.js'></script>

当这是修复你看不到任何东西，因为中心设在我们，你的所有数据是为法国。
标记不可见，因为没有为它们设置映射。应该使用选项map：
function initialize() {
    //var center = new google.maps.LatLng(37.4419, -122.1419);
    var center = new google.maps.LatLng(49, 2.56);

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    var macDoList = [
        {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
        {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
        {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
        {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
        {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
    ];

    for(var i=0;i<5;i++){
        console.log(macDoList[i].lat)
        var latLng = new google.maps.LatLng(
                            macDoList[i].lat,
                            macDoList[i].lng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
        markers.push(marker);
    }

    var markerCluster = new MarkerClusterer(map, markers);
}

关于javascript - Google Maps Marker Cluster示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21793756/

javascriptCluster34googledrivejquerygoogle-mapsgoogle-maps-api-3markerclusterer

有关javascript - Google Maps Marker Cluster示例的更多相关文章

  1. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  4. arrays - 如何在下面的示例中将两个值数组分组为 n 个值数组？ - 2

    我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby​​库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_

  5. ruby - Google-api-ruby-client 翻译 API 示例 - 2

    很高兴看到google代码:google-api-ruby-client项目，因为这对我来说意味着Ruby人员可以使用GoogleAPI-s来完善代码。虽然我现在很困惑，因为给出的唯一示例使用Buzz，并且根据我的实验，Google翻译(v2)api的行为必须与google-api-ruby-client中的Buzz完全不同。.我对“Explorer”演示示例很感兴趣——但据我所知，它并不是一个探索器。它所做的只是调用一个Buzz服务，然后浏览它已经知道的关于Buzz服务的事情。对我来说，Explorer应该让您“发现”所公开的服务和方法/功能，而不一定已经知道它们。我很想听听使用这个

  6. ruby - 是否有 SproutCore 或 Cappuccino 的现场演示/示例应用程序 - 2

    在他们的网站上找不到任何内容。我主要只是想看看哪个值得一试(当然是RIA)。谢谢 最佳答案 SproutCoredemos 关于ruby-是否有SproutCore或Cappuccino的现场演示/示例应用程序，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1419788/

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby - 如何设置自动测试以仅重新运行失败的 rspec 示例 - 2

    我对自动测试的工作方式的印象(基于cucumbergithubwiki和其他在线内容)是它应该重新运行红色示例，直到它们通过。我的问题是它会重新运行规范文件中找到失败示例的所有示例，包括通过的示例。我不想浪费时间在修复失败示例的同时重新运行通过的示例。是否可以配置自动测试以便仅运行失败的示例？ 最佳答案 您需要rspec-retrygem。以下是文档中有关如何实现它的一些示例:将它应用到覆盖整个测试套件的configureblock中...RSpec.configuredo|config|config.verbose_retry=t

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐