Question

我正在尝试制作它，以便您可以单击外部链接并在单击链接时显示标记类别。我希望地图隐藏标记直到单击链接，并在单击另一个链接以查找其他标记类别时删除标记。

map.addMarker({
    lat: 37.20162,
    lng: -112.986244,
    title: 'Zion National Park',
    icon: "../images/attractions_icon.png",

    }
  });

我可以设置地图标记的ID并从链接中引用它吗？我完全迷失了。

这是一个例子，但我希望它做相反的事情。我想隐藏标记，直到点击链接。

http://www.fisgonia.com/

Answer 1

你会有一堆标记，所以你需要循环一些数组来产生你的结果，比如：

//JavaScript should be external for caching - mapstuff.js    
var doc = document, gm = google.maps;
function E(e){
  return doc.getElementById(e);
}
var map = new gm.Map(E('theMap'), {/*map options*/});
function addMarker(title, icon, lat, lng) {
  return new gm.Marker({
    position: new gm.LatLng(lat, lng),
    title: title,
    icon: icon,
    map: map
  });
}
var cat1Img = '../images/attractions_icon.png';
var cat2Img = 'whatever.png';
var cat3Img = 'another.png';
//add more images as necessary 
var cat1 = [['Zion National Park', cat1Img, 37.20162, -112.986244], [/*repeat step 1 with different lat lng title using the same cat1Img*/], [/*you know the drill*/], [/*you know the drill*/]];
var cat2 = [/*same like cat1 using cat2Img*/];
var cat3 = [/*see the pattern*/];
var catComb = [cat1, cat2, cat3]; //add to as necessary
var cats = E('cats'), catAnchors = cats.childNodes;
for(var n=0,l=catAnchors.length; n<l; n++){
  var cat = catAnchors[n];
  if(cat.nodeType === 1){
    cat.onclick = function(){
      for(var i in catComb){
        for(var q in catComb[i]){
          addMarker.apply(addMarker, catComb[i][q]);
        }
      }
      return false;
    }
  }
}

/*should be external for caching - mapstuff.css*/
body{
  margin:0;
}
#main{
  width:980px; padding:15px 20px; margin:0 auto;
}
#mapTest{
  color:#007; text-align:center; margin:10px;
}
#cats{
  width:200px; float:left:
}
#cats a{
  display:block;
}
#theMap{
  height:400px; width:740px; background:url('placeholder.png'); float:left;
}
.br{
  clear:left; /*backward compatible*/
}

<!--HTML-->
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <title>Map Stuff is Cool</title>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'mapstuff.css';
    </style>
  </head>
<body>
  <div id='main'>
    <h1 id='mapTest'>Map Test</div>
    <div id='cats'>
      <a href='#'>Category 1</a>
      <a href='#'>Category 2</a>
      <a href='#'>Category 3</a>
    </div>
    <div id='theMap'></div>
    <div class='br'></div>
  </div>
  <script type='text/javascript' src='https://maps.google.com/maps/api/js?sensor=true'></script>
  <script type='text/javascript' src='mapstuff.js'></script>
</body>
</html>

如何在点击链接时隐藏/显示gmaps.js标记

1 个答案: