Question

我搜索了使用google map api中的复选框过滤标记的示例代码。它从排列中获取标记数据。以下是链接：

https://jsfiddle.net/kimsngeon/5xw7jfkn/4/

然后，我尝试从“ json”获取标记数据，并使标记过滤器引用该代码，但它不起作用。

出现地图和标记，但“过滤器”复选框不执行任何操作。

var map;
var gmarkers1 = [];
var markers1 = [];


function initMap() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: {lat: 37.5515, lng: 126.9250},
          zoom: 15
        });
        

    addMarker()
}

function addMarker() {
  console.log('creating markers')

  geojson_url = 'stores.json'
  $.getJSON(geojson_url, function(result) {
      // Post select to url.
      data = result['features']
      $.each(data, function(key, val) {
        var pos = new google.maps.LatLng(
                parseFloat(val['geometry']['coordinates'][1]),
                parseFloat(val['geometry']['coordinates'][0]));
        var title = val['properties']['title']
        var content = val['properties']['title']
        var category = val['properties']['description']

        var marker1 = new google.maps.Marker({
          position: pos,
          title: title,
          category: category,
          map: map,
          properties: val['properties']
         });

        gmarkers1.push(marker1);

       
        
      });
  });
}

updateView = function (element) {
  	if (element) {
        //Get array with names of the checked boxes
        checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) { return o.id; });
        console.log(checkedBoxes);
        for (i = 0; i < markers1.length; i++) {
        		marker = gmarkers1[i];
            console.log(marker.category)
            //Filter to show any markets containing ALL of the selected options
        		if(typeof marker.category == 'object' && checkedBoxes.every(function (o) {
        return (marker.category).indexOf(o) >= 0;})){
            		marker.setVisible(true);
        		}
            else {
  		          marker.setVisible(false);
  		      }
        }
  	}
  	else {
   		 console.log('No param given');
		}
}

$(document).ready(function() {
$(function() { 
  $('input[type="checkbox"]').bind('click',function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
    })
  });
    });
// Init map
initMap();

<html>
        <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>

#map-canvas {
    width: 600px;
    height: 500px;
}

</style>   
</head>    
<body>

<div id="map-canvas"></div>

    <div id="options">
    <input type="checkbox" id="hansik" onchange="updateView(this);"/> hansik
    <input type="checkbox" id="jungsik" onchange="updateView(this);"/> jungsik
    <input type="checkbox" id="yangsik" onchange="updateView(this);"/> yangsik
    </div>

    <script src="1126.js"></script>
    
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=3&language=ee&dummy=dummy.js"></script>
</body>    
</html>

这是我的json链接 http://likenikegirl.dothome.co.kr/stores.json

Answer 1

您的代码有两个问题：

您的数组名称为gmarkers1。更改此行（在updateView函数中）：

for (i = 0; i < markers1.length; i++) {

收件人：

for (i = 0; i < gmarkers1.length; i++) {

category（在示例中，基于代码的基础）是一个数组。更改：

var marker1 = new google.maps.Marker({
          position: pos,
          title: title,
          category: category,
          map: map,
          properties: val['properties']
         });

收件人：

        var marker1 = new google.maps.Marker({
          position: pos,
          title: title,
          category: [category],
          map: map,
          properties: val['properties']
         });

proof of concept fiddle

var map;
var gmarkers1 = [];
var markers1 = [];


function initMap() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: {lat: 37.5515, lng: 126.9250},
          zoom: 15
        });
        

    addMarker()
}

function addMarker() {
  console.log('creating markers')

  geojson_url = 'stores.json'
  //$.getJSON(geojson_url, function(result) {
      // Post select to url.
      var result = jsonData;
      data = result['features']
      $.each(data, function(key, val) {
        var pos = new google.maps.LatLng(
                parseFloat(val['geometry']['coordinates'][1]),
                parseFloat(val['geometry']['coordinates'][0]));
        var title = val['properties']['title']
        var content = val['properties']['title']
        var category = val['properties']['description']

        var marker1 = new google.maps.Marker({
          position: pos,
          title: title,
          category: [category],
          map: map,
          properties: val['properties']
         });

        gmarkers1.push(marker1);

       
        
      });
  // });
}

updateView = function (element) {
  	if (element) {
        //Get array with names of the checked boxes
        checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) { return o.id; });
        console.log(checkedBoxes);
        for (i = 0; i < gmarkers1.length; i++) {
        		marker = gmarkers1[i];
            console.log(marker.category)
            //Filter to show any markets containing ALL of the selected options
        		if(typeof marker.category == 'object' && checkedBoxes.every(function (o) {
        return (marker.category).indexOf(o) >= 0;})){
            		marker.setVisible(true);
        		}
            else {
  		          marker.setVisible(false);
  		      }
        }
  	}
  	else {
   		 console.log('No param given');
		}
}

$(document).ready(function() {
$(function() { 
  $('input[type="checkbox"]').bind('click',function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
    })
  });
    });
// Init map
initMap();

<html>
        <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script>
        var jsonData = {
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9288675,37.5490519 ]
    },
    "properties": {
    "hansik":true,
    "jungsik":false,
    "yangsik":false,
    "description":"hansik",
    "title":"광흥창 뚝배기집",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9216405,37.5485891 ]
    },
    "properties": {
    "hansik":true,
    "jungsik":false,
    "yangsik":false,
    "description":"hansik",
    "title":"국제식당상수점",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9201695,37.5524256 ]
    },
    "properties": {
    "hansik":true,
    "jungsik":false,
    "yangsik":false,
    "description":"hansik",
    "title":"싸움의 고수",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.922562,37.549561 ]
    },
    "properties": {
    "hansik":false,
    "jungsik":true,
    "yangsik":false,
    "description":"jungsik",
    "title":"한양중식",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9187665,37.5519167 ]
    },
    "properties": {
    "hansik":false,
    "jungsik":true,
    "yangsik":false,
    "description":"jungsik",
    "title":"중화가정",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.923487,37.548607 ]
    },
    "properties": {
    "hansik":false,
    "jungsik":true,
    "yangsik":false,
    "description":"jungsik",
    "title":"푸른소반",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.923201,37.550157 ]
    },
    "properties": {
    "hansik":false,
    "jungsik":false,
    "yangsik":true,
    "description":"yangsik",
    "title":"진짜파스타",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.922973,37.551056 ]
    },
    "properties": {
    "hansik":false,
    "jungsik":false,
    "yangsik":true,
    "description":"yangsik",
    "title":"몬스터피자",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.924032,37.551597 ]
    },
    "properties": {
    "hansik":false,
    "jungsik":false,
    "yangsik":true,
    "description":"yangsik",
    "title":"미즈컨테이너서교점",
    "marker-size":"small"
    }
  }
]
}
</script>
<style>

#map-canvas {
    width: 600px;
    height: 500px;
}

</style>   
</head>    
<body>

<div id="map-canvas"></div>

    <div id="options">
    <input type="checkbox" id="hansik" onchange="updateView(this);"/> hansik
    <input type="checkbox" id="jungsik" onchange="updateView(this);"/> jungsik
    <input type="checkbox" id="yangsik" onchange="updateView(this);"/> yangsik
    </div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=3&language=ee&dummy=dummy.js"></script>
</body>    
</html>

谷歌地图上的json过滤标记：checkbutton不起作用

1 个答案: