如何显示适合不同类别的标记的不同图标？ [英] How can I display a different icon for markers that fit wthin different categories?

问题描述

我正在尝试制作Google地图，该地图允许用户查看某个类别并显示这些具体地点。我有这部分工作：

I'm attempting to make a Google Map which allows the user to check off a category and have those specific locations display. I've got that part working:

http://thedenvillehub.com/test-hs/adv/scripts/test.html

我想要做的是每个类别都有不同的图标，所以一个是红色的，一个是蓝色的，等等。我在网上找到了几个例子，但是似乎没有任何东西可以用于我。这里是我的代码供参考：

What I want to do is have a different icon come up for each category, so that one is red, one is blue, etc. I found a couple of examples online but nothing seems to be working for me. Here's my code for reference:

var markers = new Array();
var locations = [
    ['Boonton Town', '402-9410', 'Dial-a-Ride', 40.902, -74.407, 1 ],
    ['Boonton Township', '331-3336', 'Dial-a-Ride', 40.933, -74.425, 2 ],
    ['Butler Borough', '835-8885', 'Dial-a-Ride', 40.999497, -74.346326, 3 ]
    //other locations and categories
];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(40.7967667, -74.4815438),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][3], locations[i][4]),
      map: map,
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  });

  markers.push(marker);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
          infowindow.setContent(locations[i][0] +
              "<br />"+locations[i][2]+"<br />"+locations[i][1]);
          infowindow.open(map, marker);
      }
  })(marker, i));
}

// shows all markers of a particular category,
// and ensures the checkbox is checked

function show(category) {
    for (var i=0; i<locations.length; i++) {
        if (locations[i][2] == category) {
            markers[i].setVisible(true);
        }
    }
}

// hides all markers of a particular category,
// and ensures the checkbox is cleared

function hide(category) {
    for (var i=0; i<locations.length; i++) {
        if (locations[i][2] == category) {
            markers[i].setVisible(false);
        }
    }
}

// == show or hide the categories initially ==

hide("Dial-a-Ride");
hide("American Legion");
hide("Veterans of Foreign Wars");
hide("Nutrition");

$(".checkbox").click(function(){
    var cat = $(this).attr("value");

    // If checked
    if ($(this).is(":checked")) {
        show(cat);
    }
    else {
        hide(cat);
    }
});

推荐答案

制作一个对象 var iconSrc = {}

然后，将类别与图标图片进行匹配。

Then, match categories to icon images to it.

iconSrc['Dial-a-ride'] = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconSrc['American Legion'] = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
...

添加标记时，将图标图像源替换为新变量：

when adding a marker, replace the icon image source with the new variable:

icon: iconSrc[locations[i][2]]

这里是一个jsfiddle，小窗格中的导航很困难，所以我将复选框移到顶端。 http://jsfiddle.net/DA92S/1/

Here's a jsfiddle, the navigation is tough in the small pane so I moved the checkboxes to the top. http://jsfiddle.net/DA92S/1/

这篇关于如何显示适合不同类别的标记的不同图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！