堆栈内存溢出
  繁体   English   中英

Google map api：按类别划分的多个侧边栏不起作用（文本不出现）

[英]Google map api : Multiple sidebar by category doesn't work (text doesn't appear)

 原文  2019-11-27 17:24:19  6   1    javascript/ jquery/ google-maps/ google-maps-api-3/ map-api

问题描述

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

首先，我做了一个这样的单行侧边栏。 我制作的单行侧边栏的图像。请检查。 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>

1 个解决方案

解决方案1
 0  2019-11-28 14:12:45

您发布的代码有问题。

  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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google Maps API地图未显示 Google Map API调整大小不起作用 Google地图未出现（未加载） 删除标记谷歌地图不起作用API v3 Google Map API setCenter方法不起作用 Google地图标记未显示在地图叠加层上 使用 Google Places API 进行多项输入不起作用 地理编码谷歌地图不起作用 Google Map WatchPosition无法正常工作 标记未显示在Google Map API上
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM