按类别划分的侧边栏标记列表不起作用
Sidebar marker list by category not working
我用google map api v3制作了一个地图。我想使侧边栏列出的标记按类别划分。当单击侧边栏中的标记列表时,地图上的标记将显示其信息,如此示例http://www.geocodezip.com/v3_MW_example_categories.html。这里是map.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#category_panel {
background-color : white;
padding : 5px;
font-size : 13px;
margin-top : 5px;
border : 1px solid #aaa;
}
#map {
width: 800px;
height: 400px;
padding : 0;
left : 3%;
top : 10%;
}
#side_bar {
position: absolute;
width: 300px;
height: 400px;
top: 3%;
left: 70%;
border : 1px solid #aaa;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDKXwzDz8D96-bipZjRwkW97gcdHkOHt2M">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.9667, 110.41677),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var selectDiv = $("#category_panel")[0];
map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectDiv);
}
$(document).ready(function() {
$.getJSON("data.txt", function(json) {
$.each(json, function(key, data) {
var clusterer;
var infoWindow = new google.maps.InfoWindow();
// Marker Clusterer setup
var mcOptions = {
gridSize : 1,
maxZoom : 15
};
clusterer = new MarkerClusterer(map, [], mcOptions);
var markers = {};
var side_bar_html = "";
// Looping JSON data
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng),
category = data.category;
if (category in markers == false) {
markers[category] = [];
}
var marker = new google.maps.Marker({
position : latLng,
title : data.title,
});
markers[category].push(marker);
// document.getElementById("side_bar").innerHTML = side_bar_html;
// side_bar_html += '<a href="javascript:(marker, data)(' + (markers.length-1) + ')">' + data.title + '<'/a><br><br>';
(function (marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
function makeSidebar() {
//var html = "";
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng),
category = data.category;
if (category in markers == false) {
markers[category] = [];
}
{
side_bar_html += '<a href="javascript:(marker, data)(' + i + ')">' + data.title + '<'/a><br>';
}
}
document.getElementById("side_bar").innerHTML = side_bar_html;
}
}// loop ends
$("#category").change(function()
{
var selected = $(this).val();
clusterer.clearMarkers();
clusterer.addMarkers(markers[selected]);
});
$("#category").change();
makeSidebar();
});
});
});
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
<div id="side_bar"></div>
<div lang="en" id="category_panel">
Category:<select id="category">
<option value="category1">category 1</option>
<option value="category2">category 2</option>
</select>
</div>
</body>
</html>
这里是data.txt
[
{
"title": "1A",
"lat": -6.984,
"lng": 110.41,
"description": "1B",
"category": "category1"
},
{
"title": "1B",
"lat": -6.9963,
"lng": 110.398,
"description": "1B",
"category": "category1"
},
{
"title": "2A",
"lat": -6.9904,
"lng": 110.42307,
"description": "2B",
"category": "category2"
},
{
"title": "2B",
"lat": -7.003,
"lng": 110.4247,
"description": "2B",
"category": "category2"
}
]
问题是:首先,侧边栏中的标记链接在点击时不起作用。其次,所有的标记数据总是出现,只有在选择类别时才会出现。有人能帮我吗?提前感谢您的帮助
我认为你想要的工作示例
从参考的例子开始。
- 添加getJSON(与JSON格式的修改版本)
- 新增mycategoryclick功能
-
将复选框功能更改为选择(下拉)
function createMarker(latlng,name,html,category) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, icon: getMarkerImage(category2color(category)), // gicons[category], map: map, title: name, zIndex: Math.round(latlng.lat()*-100000)<<5 }); // === Store the category and name info as a marker properties === marker.mycategory = category; marker.myname = name; gmarkers.push(marker); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); return marker; } function select(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(true); } else { gmarkers[i].setVisible(false); } } // == close the info window, in case its open on a marker that we just hid infowindow.close(); // == rebuild the side bar makeSidebar(); } function createCategoryDropdown(category) { var select_holder = document.getElementById('select_holder'); var option = document.createElement("option"); option.setAttribute("name",category); option.setAttribute("value",category); option.innerHTML = category; select_holder.appendChild(option); } function mycategoryclick(category,i) { google.maps.event.trigger(markers[category][i],"click"); } // == rebuilds the sidebar to match the markers currently displayed == function makeSidebar() { var html = ""; for (category in markers) { // html += "<b>"+category+"</b><br>"; for (var i=0; i<markers[category].length; i++) { if (markers[category][i].getVisible()) { html += '<a href="javascript:mycategoryclick("'+category+'",' + i + ')">' + markers[category][i].myname + '<'/a><br>'; } } } document.getElementById("side_bar").innerHTML = html; } function initialize() { var myOptions = { zoom: 11, center: new google.maps.LatLng(53.8363,-3.0377), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Read the data $.getJSON("SO_20140622_data.txt", function(json) { var firstcat = null; var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < json.length; i++) { // obtain the attribues of each marker var lat = parseFloat(json[i].lat); var lng = parseFloat(json[i].lng); var point = new google.maps.LatLng(lat,lng); bounds.extend(point); var name = json[i].title; var category = json[i].category; var html = "<b>"+name+"<'/b><p>"+json[i].description+"</p>category:"+category; // create the marker var marker = createMarker(point,name,html,category); if (category in markers == false) { if (firstcat == null) firstcat = category; markers[category] = []; } markers[category].push(marker); } // == create the categories dropdowns == for (category in markers) { createCategoryDropdown(category); } // == show the first category select(firstcat); // == create the initial sidebar == makeSidebar(); // == fit the viewport to _all_ the markers == map.fitBounds(bounds); }); }
相关文章:
- 显示基于第一个下拉列表的第二个下拉列表不起作用
- 引导程序的下拉列表不起作用
- 如果选项值是“改变列表不起作用”;真的”;
- 带有计算器的Javascript列表不起作用
- 下拉列表不起作用
- JavaScript下拉列表不起作用
- 语义 UI 下拉列表不起作用
- 添加选项卡窗格后引导选项卡下拉列表不起作用
- JS类列表不起作用
- 嵌套下拉列表不起作用
- Ajax 调用删除和刷新列表不起作用
- 地图框:当我尝试更改 geojson 对象的纬度/经度时,该列表不起作用
- 为什么我的动态下拉列表不起作用
- JavaScript中的类列表不起作用
- 依赖下拉列表不起作用
- 依赖下拉列表不起作用
- Django和Javascript:依赖下拉列表不起作用
- 基于从下拉列表中选择的值的筛选列表不起作用
- 更改选定列表时的下拉列表不起作用
- koGrid中嵌入的下拉列表不起作用