Google Map API：按类别的多个侧边栏不起作用（文本不显示）
我想在Google地图上进行分类的可点击侧边栏，但是代码不起作用。没有标记的标题出现。
首先，我做了一个这样的单行边栏。 image of a one-line sidebar I made.Check please. https://jsfiddle.net/kimsngeon/fo70tsmv/9/
然后，我尝试根据放置的标记的类别制作多个按类别分类的侧边栏。 喜欢这张图片： image of what I want to make
我如下修改了先前的代码，但是数据文本没有出现。我认为最好将标记的类别与表格框的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 个答案:
答案 0 :(得分：0)
您对发布的代码有疑问。
- 您没有调用
showcategory()函数 -
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;
a。 markers1应该是gmarkers1（所有6个地方）
b。 (gmarkers1.length-1)应该是i
c。 side_bar_htmlX循环之后，for语句应位于函数内部。
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？