javascript - 单击其他时更改 Google map 标记图标

coder 2024-07-22 原文

我创建了一个 Google map 多位置页面，使用高级自定义字段 Google map 字段。

我已经设法使标记图标在单击时发生变化，但我希望在单击其他图标时将其更改回来。

代码示例:

    for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: iconBase + 'Stock%20Index%20Up.png'
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);
      marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
    }
  })(marker, i));

更好地查看这里的工作代码: http://jsfiddle.net/gargiguy/s8vgxp3g

最佳答案

邓肯说的是:您要做的是将所有标记添加到一个数组中。在您的点击事件处理程序中，遍历该数组，更新每个标记的图标。然后最后只为被点击的标记设置图标。

google.maps.event.addListener(marker, 'click', (function (marker, i) {
  return function () {
    infowindow.setContent(locations[i][0], locations[i][6]);
    infowindow.open(map, marker);
    for (var j = 0; j < markers.length; j++) {
      markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
    }
    marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};

working fiddle

工作代码片段:

var markers = [];
var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: iconBase + 'Stock%20Index%20Up.png'
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0], locations[i][6]);
        infowindow.open(map, marker);
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
        }
        marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
      };
    })(marker, i));
    markers.push(marker);

  }
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
  [
    "New Mermaid",
    36.9079, -76.199,
    1,
    "Georgia Mason",
    "",
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
    "coming soon"
  ],
  [
    "1950 Fish Dish",
    36.87224, -76.29518,
    2,
    "Terry Cox-Joseph",
    "Rowena's",
    "758 W. 22nd Street in front of Rowena's",
    "found"
  ],
  [
    "A Rising Community",
    36.95298, -76.25158,
    3,
    "Steven F. Morris",
    "Judy Boone Realty",
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
    "found"
  ],
  [
    "A School Of Fish",
    36.88909, -76.26055,
    4,
    "Steven F. Morris",
    "Sandfiddler Pawn Shop",
    "5429 Tidewater Dr.",
    "found"
  ],
  [
    "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
    "Myke Irving/ Georgia Mason",
    "USAVE Auto Rental",
    "Virginia Auto Rental on Virginia Beach Blvd",
    "found"
  ]
];

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div>
  <div id="map" style="width: 500px; height: 400px;"></div>
</div>

关于javascript - 单击其他时更改 Google map 标记图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27754101/

javascript Google 34 marker locations google-maps-api-3 google-maps-markers advanced-custom-fields

有关javascript - 单击其他时更改 Google map 标记图标的更多相关文章

ruby - 其他文件中的 Rake 任务 - 2
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？最佳答案我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby - Capistrano 3 在任务中更改 ssh_options - 2
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
ruby - 更改 ActiveRecord 中对象的类 - 2
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
ruby - 调用其他方法的 TDD 方法的正确方法 - 2
我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent
java - 我的模型类或其他类中应该有逻辑吗 - 2
我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我
python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2
我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的
ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2
我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。最佳答案虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

javascript - 单击其他时更改 Google map 标记图标

有关javascript - 单击其他时更改 Google map 标记图标的更多相关文章

随机推荐