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

Question

I searched the example code that filters the marker using checkbox at google map api . 我搜索了使用google map api中的复选框过滤标记的示例代码。 It gets marker data from arrangement. 它从排列中获取标记数据。 below is the link: 以下是链接：

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

Then I try to get marker data from "json" and make marker filter refer to the code, but it doesn't work. 然后，我尝试从“ json”获取标记数据，并使标记过滤器引用该代码，但是它不起作用。

The map and markers appear, but filter checkbox doesn't do anything. 出现地图和标记，但“过滤器”复选框不执行任何操作。

 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>

and this is my json link http://likenikegirl.dothome.co.kr/stores.json 这是我的json链接http://likenikegirl.dothome.co.kr/stores.json

Answer 1

You have two issues with your code: 您的代码有两个问题：

your array name is gmarkers1 . 您的数组名称是gmarkers1 。 Change this line (in the updateView function): 更改此行（在updateView函数中）：

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

to: 至：

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

category (in the example you based your code off of) is an array. category （在示例中，基于代码的基础）是一个数组。 Change: 更改：

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

To: 至：

        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 个解决方案

解决方案1
0 已采纳 2019-11-26 21:23:31

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-11-26 21:23:31

解决方案1
0 已采纳 2019-11-26 21:23:31