谷歌地图边栏单击让标记到地图中心

时间:2016-04-08 07:58:04

标签: google-maps google-maps-api-3 sidebar

我想更改此演示侧边栏点击让标记到地图中心, 什么错误我的所有代码? 侧栏鼠标悬停时,标记始终不在中心

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>

0 个答案:

没有答案