0

我想在谷歌地图上制作分类的可点击侧边栏，但代码不起作用。没有出现标记的标题。

首先，我做了一个这样的单行侧边栏。我制作的单行侧边栏的图像。请检查。 https://jsfiddle.net/kimsngeon/fo70tsmv/9/

然后，我尝试根据我放置的标记类别制作多个按类别分类的侧边栏。喜欢这张图片： 我想要制作的图片

我修改了之前的代码如下，但没有出现数据文本。我认为最好将标记的类别与表格框的id进行比较，然后将每个标记分配给右侧边栏表格，但它不起作用。你能检查我的逻辑或代码中是否有错误？ https://jsfiddle.net/kimsngeon/fo70tsmv/22/

var map;
var gmarkers1 = [];
var markers1 = [];
var side_bar_html0 = "";
var side_bar_html1 = "";
var side_bar_html2 = "";
var i=0;


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')
  var infoWindow = new google.maps.InfoWindow()

  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']
        console.log("title="+title+", content="+content+", category="+category);

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

        
        var markerInfo = "<div>" + title + "</br>category: " + category + "</div>"

          marker1.addListener('click', function() {
          infoWindow.close()
          infoWindow.setContent(markerInfo)
          infoWindow.open(map, marker1)
        });
        
        gmarkers1.push(marker1);
        
        //call the id of category of sidebar
        var id_hansik = $('#hansik').val();
        var id_jungsik = $('#jungsik').val();
        var id_yangsik = $('#yangsik').val();
        
        //compare the category of marker with the id of sidebar table, and then assign each marker to right sidebar table
        function showcategory()
        {
            for (i = 0; i < gmarkers1.length; i++){
                    if(markers1[i].category == idhansik)
                        side_bar_html0 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                    else if(markers1[i].category == idjungsik)
                        side_bar_html1 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                    else if(markers1[i].category == idyangsik)
                        side_bar_html2 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                    
                }
        }
        

        //document.getElementById("side_bar").innerHTML = side_bar_html;
        document.getElementById("sidebar0").innerHTML = side_bar_html0;
        document.getElementById("sidebar1").innerHTML = side_bar_html1;
        document.getElementById("sidebar2").innerHTML = side_bar_html2;
    
      });
  //});  
}

function myclick(i) {
        google.maps.event.trigger(gmarkers1[i], 'click');
      }


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();
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<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": {
    "description":"hansik",
    "title":"h_1",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9216405,37.5485891 ]
    },
    "properties": {
    "description":"hansik",
    "title":"h_2",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9201695,37.5524256 ]
    },
    "properties": {
    "description":"hansik",
    "title":"h_3",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.922562,37.549561 ]
    },
    "properties": {
    "description":"jungsik",
    "title":"j_1",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.9187665,37.5519167 ]
    },
    "properties": {
    "description":"jungsik",
    "title":"j_2",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.923487,37.548607 ]
    },
    "properties": {
    "description":"jungsik",
    "title":"j_3",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.923201,37.550157 ]
    },
    "properties": {
    "description":"yangsik",
    "title":"y_1",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.922973,37.551056 ]
    },
    "properties": {
    "description":"yangsik",
    "title":"y_2",
    "marker-size":"small"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 126.924032,37.551597 ]
    },
    "properties": {
    "description":"yangsik",
    "title":"y_3",
    "marker-size":"small"
    }
  }
]
}
</script>
<style>

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

</style>   
</head>    
<body>

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

<table border=1>
      <tr>

        <td width = 150 height = 300 valign="top" style="text-decoration: underline; color: #4444ff;">
           <input type="checkbox" id="hansik" onchange="updateView(this);"/> hansik
           <div id="sidebar0"></div>
        </td>
        <td width = 150 height = 300 valign="top" style="text-decoration: underline; color: #4444ff;">
           <input type="checkbox" id="jungsik" onchange="updateView(this);"/> jungsik
           <div id="sidebar1"></div>
        </td>
        <td width = 150 height = 300 valign="top" style="text-decoration: underline; color: #4444ff;">
            <input type="checkbox" id="yangsik" onchange="updateView(this);"/> yangsik
           <div id="sidebar2"></div>
        </td>

      </tr>
    </table>

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

4

1 回答 1

0

您对发布的代码有疑问。

  1. 你没有调用showcategory()函数
  2. 该showcategory函数存在问题：
//compare the category of marker with the id of sidebar table, and then assign each marker to right sidebar table
    function showcategory()
    {
        for (i = 0; i < gmarkers1.length; i++){
                if(markers1[i].category == idhansik)
                    side_bar_html0 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                else if(markers1[i].category == idjungsik)
                    side_bar_html1 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                else if(markers1[i].category == idyangsik)
                    side_bar_html2 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';

            }
    }


    //document.getElementById("side_bar").innerHTML = side_bar_html;
    document.getElementById("sidebar0").innerHTML = side_bar_html0;
    document.getElementById("sidebar1").innerHTML = side_bar_html1;
    document.getElementById("sidebar2").innerHTML = side_bar_html2;

一个。markers1应该是gmarkers1（所有 6 个地方）

湾。(gmarkers1.length-1)应该i

C。side_bar_htmlX语句应该在函数内部，在循环for之后。

d。idhansik和idjungsik应该idyangsik是匹配这些类别的字符串。

应该：

//compare the category of marker with the id of sidebar table, and then assign each marker to right sidebar table
function showcategory() {
  for (i = 0; i < gmarkers1.length; i++) {
    if (gmarkers1[i].category == "hansik")
      side_bar_html0 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';
    else if (gmarkers1[i].category == "jungsik")
      side_bar_html1 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';
    else if (gmarkers1[i].category == "yangsik")
      side_bar_html2 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';

  }
  //document.getElementById("side_bar").innerHTML = side_bar_html;
  document.getElementById("sidebar0").innerHTML = side_bar_html0;
  document.getElementById("sidebar1").innerHTML = side_bar_html1;
  document.getElementById("sidebar2").innerHTML = side_bar_html2;
}

概念证明小提琴

结果地图的屏幕截图

代码片段：

var map;
var gmarkers1 = [];
var markers1 = [];
var infoWindow;
var side_bar_html0 = "";
var side_bar_html1 = "";
var side_bar_html2 = "";
var i = 0;


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')
  infoWindow = new google.maps.InfoWindow()

  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']
    console.log("title=" + title + ", content=" + content + ", category=" + category);

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


    var markerInfo = "<div>" + title + "</br>category: " + category + "</div>"

    marker1.addListener('click', function() {
      infoWindow.close()
      infoWindow.setContent(markerInfo)
      infoWindow.open(map, marker1)
    });

    gmarkers1.push(marker1);

    //call the id of category of sidebar
    var id_hansik = $('#hansik').val();
    var id_jungsik = $('#jungsik').val();
    var id_yangsik = $('#yangsik').val();

  });
  showcategory();
  //});  
}
//compare the category of marker with the id of sidebar table, and then assign each marker to right sidebar table
function showcategory() {
  for (i = 0; i < gmarkers1.length; i++) {
    if (gmarkers1[i].category == "hansik")
      side_bar_html0 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';
    else if (gmarkers1[i].category == "jungsik")
      side_bar_html1 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';
    else if (gmarkers1[i].category == "yangsik")
      side_bar_html2 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';

  }
  //document.getElementById("side_bar").innerHTML = side_bar_html;
  document.getElementById("sidebar0").innerHTML = side_bar_html0;
  document.getElementById("sidebar1").innerHTML = side_bar_html1;
  document.getElementById("sidebar2").innerHTML = side_bar_html2;
}

function myclick(i) {
  if (gmarkers1[i].getVisible())
    google.maps.event.trigger(gmarkers1[i], 'click');
}


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);
      }
    }
    infoWindow.close();
  } 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();
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<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": {
            "description": "hansik",
            "title": "h_1",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.9216405, 37.5485891]
          },
          "properties": {
            "description": "hansik",
            "title": "h_2",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.9201695, 37.5524256]
          },
          "properties": {
            "description": "hansik",
            "title": "h_3",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.922562, 37.549561]
          },
          "properties": {
            "description": "jungsik",
            "title": "j_1",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.9187665, 37.5519167]
          },
          "properties": {
            "description": "jungsik",
            "title": "j_2",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.923487, 37.548607]
          },
          "properties": {
            "description": "jungsik",
            "title": "j_3",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.923201, 37.550157]
          },
          "properties": {
            "description": "yangsik",
            "title": "y_1",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.922973, 37.551056]
          },
          "properties": {
            "description": "yangsik",
            "title": "y_2",
            "marker-size": "small"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [126.924032, 37.551597]
          },
          "properties": {
            "description": "yangsik",
            "title": "y_3",
            "marker-size": "small"
          }
        }
      ]
    }
  </script>
  <style>
    #map-canvas {
      width: 600px;
      height: 500px;
    }
  </style>
</head>

<body>

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

  <table border=1>
    <tr>

      <td width=150 height=300 valign="top" style="text-decoration: underline; color: #4444ff;">
        <input type="checkbox" id="hansik" onchange="updateView(this);" /> hansik
        <div id="sidebar0"></div>
      </td>
      <td width=150 height=300 valign="top" style="text-decoration: underline; color: #4444ff;">
        <input type="checkbox" id="jungsik" onchange="updateView(this);" /> jungsik
        <div id="sidebar1"></div>
      </td>
      <td width=150 height=300 valign="top" style="text-decoration: underline; color: #4444ff;">
        <input type="checkbox" id="yangsik" onchange="updateView(this);" /> yangsik
        <div id="sidebar2"></div>
      </td>

    </tr>
  </table>


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

</html>

于 2019-11-28T14:12:45.623 回答