-1
我用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"
}
]
的问题是：第一，点击后在边栏标记链接无效。其次，所有标记数据总是出现，只有在选择了类别时才应出现。 任何人都可以帮助我？在此先感谢您的帮助
没有你已经问这个问题？我再也找不到这个问题了，所以也许你把它删除了。你为什么期望这个'''+ data.title +'<\/a>
';'在边栏中做什么有用的事情？它给了我一个JavaScript错误：'未捕获的ReferenceError：标记未定义' – geocodezip
是的，我做到了。这是一个有点不同的代码，我一直在寻找和尝试做侧边栏。对不起，我不知道错误是什么，我的浏览器中没有看到任何错误 – user3506438
单击侧边栏后查看javascript控制台。 – geocodezip