我想更改此演示侧边栏点击让标记到地图中心， 什么错误我的所有代码？ 侧栏鼠标悬停时，标记始终不在中心
https://googlemaps.github.io/js-marker-clusterer/examples/speed_test_example.html
function $(element) {
return document.getElementById(element);
}
var speedTest = {};
speedTest.pics = null;
speedTest.map = null;
speedTest.markerClusterer = null;
speedTest.markers = [];
speedTest.infoWindow = null;
speedTest.init = function() {
var latlng = new google.maps.LatLng(23.96612, 120.96626);
var options = {
'zoom': 15,
'center': latlng,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
};
/**
* Triggers the clusterclick event and zoom's if the option is set.
*/
aps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);
if (markerClusterer.isZoomOnClick()) {
// Zoom into the cluster.
// this.map_.fitBounds(this.cluster_.getBounds());
// modified zoom in function
this.map_.setZoom(markerClusterer.getMaxZoom()+17);
}
};
speedTest.map = new google.maps.Map($('map'), options);
speedTest.pics = data.photos;
var useGmm = document.getElementById('usegmm');
google.maps.event.addDomListener(useGmm, 'click', speedTest.change);
var numMarkers = document.getElementById('nummarkers');
google.maps.event.addDomListener(numMarkers, 'change', speedTest.change);
speedTest.infoWindow = new google.maps.InfoWindow({
maxWidth: 380,
pixelOffset: new google.maps.Size(0,-30),
});
speedTest.showMarkers();
};
speedTest.showMarkers = function() {
speedTest.markers = [];
var type = 1;
if ($('usegmm').checked) {
type = 0;
}
if (speedTest.markerClusterer) {
speedTest.markerClusterer.clearMarkers();
}
var panel = $('markerlist');
panel.innerHTML = '';
var numMarkers = $('nummarkers').value;
for (var i = 0; i < numMarkers; i++) {
var titleText = speedTest.pics[i].photo_title+speedTest.pics[i].owner_name;
if (titleText == '') {
titleText = 'No title';
}
var titlepp = speedTest.pics[i].photo_file_icon;
var item = document.createElement('li');
var title = document.createElement('a');
title.href = speedTest.pics[i].photo_id
title.className = 'title';
title.innerHTML = '<img src='+titlepp+'>'+'<span onclick="CngClass(this);" >'+titleText;
item.appendChild(title);
panel.appendChild(item);
var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,speedTest.pics[i].longitude);
var imageUrl = speedTest.pics[i].photo_file_icon;
var imagetitle = speedTest.pics[i].photo_title;
var marker = new google.maps.Marker({
'position': latLng,
'icon': imageUrl,
'title':imagetitle,
animation: google.maps.Animation.BOUNCE,
});
var fn = speedTest.markerClickFunction(speedTest.pics[i],latLng);
google.maps.event.addListener(marker, 'click', fn);
google.maps.event.addDomListener(title, 'mouseover',fn);
speedTest.markers.push(marker);
}
window.setTimeout(speedTest.time, 0);
};
speedTest.markerClickFunction = function(pic,latlng) {
return function(e) {
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
var title = pic.photo_title;
var url = pic.photo_url;
var fileurl = pic.photo_file_url;
var infoHtml = '<div class="info"><h3>' + title +
'</h3><div class="info-body">' +
'<a href="' + url + '" target="_blank"><img src="' +
fileurl + '" class="info-img"/></a></div>' +
'<a href="http://www.panoramio.com/" target="_blank">' +
'<img src="http://maps.google.com/intl/en_ALL/mapfiles/' +
'iw_panoramio.png"/></a><br/>' +
'<a href="' + pic.owner_url + '" target="_blank">' + pic.owner_name +'<span onclick="CngClass1(this);" >'+
'</a></div></div>';
speedTest.infoWindow.setContent(infoHtml);
speedTest.infoWindow.setPosition(latlng);
speedTest.infoWindow.open(speedTest.map);
speedTest.map.setCenter(this.getPosition());
};
};
speedTest.clear = function() {
$('timetaken').innerHTML = 'cleaning...';
for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
marker.setMap(null);
}
};
speedTest.change = function() {
speedTest.clear();
speedTest.showMarkers();
};
speedTest.time = function() {
$('timetaken').innerHTML = 'timing...';
var start = new Date();
if ($('usegmm').checked) {
speedTest.markerClusterer = new MarkerClusterer(speedTest.map, speedTest.markers);
} else {
for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
marker.setMap(speedTest.map);
}
}
var end = new Date();
$('timetaken').innerHTML = end - start;
};@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
#panel {
float: left;
width: auto;
height: 350px;
}
#map-container {
margin-left: 300px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
}
#map {
width: 100%;
height: 100%;
}
#markerlist {
height: auto;
overflow: auto;
margin-top: 10px;
margin-right: 5px;
margin-left: 10px;
}
#markerlist li {
list-style-type: none;
}
.title {
border-bottom: 1px solid #e0ecff;
overflow: hidden;
width: 256px;
cursor: pointer;
padding: 2px 0;
display: block;
color: #000;
text-decoration: none;
font-family: "微軟正黑體";
font-size: 14px;
font-weight: 700;
}
.title:hover {
background: #e0ecff;
color: #F00;
}
.title:target {
background: #000;
display: block;
color: #F00;
}
#timetaken {
}
.info {
width: auto;
margin-bottom: 20px;
}
.info img {
border: 0;
}
.info-body {
width: auto;
height: 200px;
line-height: 200px;
text-align: center;
overflow: hidden;
margin-top: 2px;
margin-right: 0;
margin-left: 0;
}
.info-img {
height: 220px;
width: 230px;
}
.current {
text-decoration: underline;
color: #039;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
.123 {
color: #039 !important;
}
.selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; }
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClusterer v3 Example</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="speed_test.js"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';}
script += '.js"><' + '/script>';
document.write(script);
</script>
</head>
<body onLoad="speedTest.init();">
<script language="javascript">
var data = { "photos":
[{"photo_id": 27932, "photo_title": "森心咖啡館", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": 120.975600, "latitude": 23.973028, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/green-dot.png"}
,
{"photo_id": 522084, "photo_title": "沃克泰泰式料理", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 120.946367, "latitude": 23.968915, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"}
,
{"photo_id": 6443936, "photo_title": "胡國雄古早麵", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.963721, "latitude":23.967491, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/orange-dot.png"}
,
{"photo_id": 6443934, "photo_title": "埔里酒廠", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.960203, "latitude":23.967910, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/orange-dot.png"}
,
{"photo_id": 6443934, "photo_title": "18度C巧克力工房", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.974924, "latitude":23.957413, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "和風食堂", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.962992, "latitude":23.967411, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "金都餐廳", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.972470, "latitude":23.973480, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "11111111", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "李仔哥爌肉飯", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.969810, "latitude":23.973408, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "卓肉圓", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.970077, "latitude":23.967365, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "羅春捲", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.967450, "latitude":23.967043, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "亞卓鄉土客家菜", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.954173, "latitude":23.969817, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "蘇媽媽湯圓", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.962827, "latitude":23.966766, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "九張桌子", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.971400, "latitude":23.969853, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://maps.google.com/mapfiles/ms/icons/red-dot.png"}
,
{"photo_id": 6443934, "photo_title": "牛相觸庭園餐坊", "photo_url": "http://www.panoramio.com/photo/6443936", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6443936.jpg", "longitude":120.946292, "latitude":23.963232, "width": 500, "height": 334, "upload_date": "12 December 2007", "owner_id": 109117, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/109117","photo_file_icon": "http://jinli.twbon.com/views/jinli/images/cart_view.png"}
,
]}
</script>
<div id="panel">
<div>
<input type="checkbox" checked="checked" id="usegmm"/>
<span>Use MarkerClusterer</span>
</div>
<div>
Markers:
<select id="nummarkers">
<option value="3" >3</option>
<option value="14" selected="selected">14</option>
<option value="5" >5</option>
<option value="10">10</option>
<option value="12">12</option>
</select>
<span>Time used: <span id="timetaken"></span> ms</span>
</div>
<div id="markerlist">
</div>
</div>
<div id="map-container">
<div id="map"></div>
</div>
<script type="text/javascript">
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='selected';
Lst=obj;
}
</script>
</body>
</html>