个人中心
gpt4 book ai didi

jquery - 根据类别或组隐藏/显示 Google map 标记

转载 作者：行者123 更新时间：2023-12-01 00:10:09 26 4
gpt4 key购买 nike

我正在创建一个可以向用户显示标记组的 Google map 。比如说一个地区的所有餐馆或公园。目前，我已经能够创建一组餐厅和一组公园，每个都有自己的标记颜色。我什至可以通过单击 map 下方的文本来隐藏或显示所有标记。但现在我想将标记分成类别，以便我可以根据复选框隐藏或显示它们。代码如下，但这是我想做的事情:

  1. 默认情况下， map 应为空白，没有标记
  2. 我可以将标记分为各自的类别并隐藏和显示每个类别
  3. 一次可以显示多个类别

这是我的代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></script>
</head>
<body>
<div id="map" style="width: 100%; height: 650px;"></div>
<p><a onClick="clearMarkers();">Clear Markers</a></p>
<p><a onClick="showRestaurants();">Show Markers</a></p>
<script type="text/javascript">
//Restaurants Markers
var restaurants = [
    ['Melt Bar and Grill', 41.485345, -81.799047],
    ['Sloane Pub', 41.486182, -81.824178],
    ['Spitfire Salon', 41.479670, -81.768430],
    ['Mahall\'s', 41.476989, -81.781094],
    ['Szechwan Garden', 41.485615, -81.787890]
];
//Parks Markers
var parks = [
    ['Lakewood Park', 41.494457, -81.797605],
    ['Madison Park', 41.476969, -81.781929],
    ['Tuland Park', 41.464052, -81.788041]
];

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

var infowindow = new google.maps.InfoWindow();

var marker, i;
var markers = new Array();

//Create and Place Restaurant Markers
for (i = 0; i < restaurants.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
        map: map,
        icon: 'images/markers/red_Marker.png'
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(restaurants[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

//Create and Place Parks Markers
for (i = 0; i < parks.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(parks[i][1], parks[i][2]),
        map: map,
        icon: 'images/markers/blue_Marker.png'
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(parks[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}
// Shows any markers currently in the array.
function showRestaurants() {
  setAllMap(map);
}
</script>
</body>
</html>

最佳答案

一个 google.maps.MVCObject 是实现这一点的一个很好的功能。

大多数 google.maps 类都会创建 MVCObject，标记也是 MVCObject。

优点:您可以将一个 MVCObject 的属性绑定(bind)到另一个 MVCObject 的属性。当源对象中的属性发生更改时，目标对象中的属性也会更新。

因此，每个类别只需要一个 MVCObject。将 MVCObject 的属性(例如 map )设置为 google.maps.Map或null并绑定(bind)map - map 的标记属性-category-MVCObject 的属性，就完成了。

要隐藏或显示所有标记，请将所有类别 MVCObject 的 map 属性设置为特定值( map 实例或 null)。

示例实现(我稍微修改了类别的结构以简化循环，为每个类别创建一个复选框来控制相关标记的显示):

$(window).load(function (){

  var places={
    restaurant:{
      label:'restaurants',
      //the category may be default-checked when you want to
      //uncomment the next line
      //checked:true,
      icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png' ,
      items: [
              ['Melt Bar and Grill', 41.485345, -81.799047],
              ['Sloane Pub', 41.486182, -81.824178],
              ['Spitfire Salon', 41.479670, -81.768430],
              ['Mahall\'s', 41.476989, -81.781094],
              ['Szechwan Garden', 41.485615, -81.787890]
             ]
    },
    park:{
      label:'parks',
      //the category may be default-checked when you want to
      //uncomment the next line
      //checked:true,
     icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
      items: [
              ['Lakewood Park', 41.494457, -81.797605],
              ['Madison Park', 41.476969, -81.781929],
              ['Tuland Park', 41.464052, -81.788041]
             ]
    }  
  },
  map = new google.maps.Map(
              document.getElementById('map'), 
              {
                zoom: 14,
                center: new google.maps.LatLng(41.485345, -81.799047),
              }
            ),
  infowindow = new google.maps.InfoWindow(),

  // a  div where we will place the buttons
  ctrl=$('<div/>').css({background:'#fff',
                        border:'1px solid #000',
                        padding:'4px',
                        margin:'2px',
                        textAlign:'center'
                       });
  //show all-button
  ctrl.append($('<input>',{type:'button',value:'show all'})
                .click(function(){
                  $(this).parent().find('input[type="checkbox"]')
                    .prop('checked',true).trigger('change');
                }));
  ctrl.append($('<br/>'));

  //clear all-button
  ctrl.append($('<input>',{type:'button',value:'clear all'})
                .click(function(){
                  $(this).parent().find('input[type="checkbox"]')
                    .prop('checked',false).trigger('change');
                }));
  ctrl.append($('<hr/>'));

  //now loop over the categories
  $.each(places,function(c,category){

    //a checkbox fo the category
    var cat=$('<input>',{type:'checkbox'}).change(function(){
       $(this).data('goo').set('map',(this.checked)?map:null);
    })
      //create a data-property with a google.maps.MVCObject
      //this MVC-object will do all the show/hide for the category 
      .data('goo',new google.maps.MVCObject)
      .prop('checked',!!category.checked)

      //this will initialize the map-property of the MVCObject
      .trigger('change')

      //label for the checkbox
      .appendTo($('<div/>').css({whiteSpace:'nowrap',textAlign:'left'})
        .appendTo(ctrl))
      .after(category.label);

      //loop over the items(markers)
      $.each(category.items,function(m,item){
         var marker=new google.maps.Marker({
                position:new google.maps.LatLng(item[1],item[2]),
                title:item[0],
                icon:category.icon
              });

         //bind the map-property of the marker to the map-property
         //of the MVCObject that has been stored as checkbox-data 
         marker.bindTo('map',cat.data('goo'),'map');
         google.maps.event.addListener(marker,'click',function(){
            infowindow.setContent(item[0]);
            infowindow.open(map,this);
         });
      });

  });

 //use the buttons-div as map-control 
 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);
}
);
<小时/>

演示:http://jsfiddle.net/doktormolle/brepbvww/

关于jquery - 根据类别或组隐藏/显示 Google map 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25769075/

26 4 0
文章推荐： mysql - 即使 Select 为空也返回结果
文章推荐： mysql - 连接两个表
文章推荐： javascript - 调整旋转对象的大小保留左上角(亚像素渲染问题)
文章推荐： python - 弹性转码器 Boto3 Lambda
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com