我用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