1. 首页
  2. 问答
  3. 办法从点击侧边栏

办法从点击侧边栏

2011-10-24 47 views
3

打开谷歌地图V3信息框，我使用的信息框插件在谷歌地图V3办法从点击侧边栏

我想复制相同的功能基本上我想这里看到

http://coolhunting.com/local/#/metroarea/chicago/jack-spade/

只要有人在侧边栏上点击，相应的信息框就会在地图上打开。

我已经添加在侧边栏点击元素上的onclick功能，但不知道我应该怎么在功能

这里做的是我的代码有

<!DOCTYPE html> 
     <html> 
     <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
     <style type="text/css"> 
     html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 50% } 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=true"></script> 
<script src="js/infobox.js" type="text/javascript"></script> 

<script type="text/javascript"> 
function initialize() { 
    var latlng = new google.maps.LatLng(66.672962361614566, 12.56587028503418); 

    var myMapOptions = { 
     zoom:5 
     ,center: latlng 
     ,mapTypeId: google.maps.MapTypeId.ROADMAP 
     ,streetViewControl: false 
    }; 
    var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); 
// namn 
var name=[]; 
name.push('Test 1'); 
name.push('Test 2'); 

// positioner 
var position=[]; 
position.push(new google.maps.LatLng(66.667093265894245,12.581255435943604)); 
position.push(new google.maps.LatLng(62.66453963191134, 12.584795951843262)); 

// infoboxes 
var infobox = []; 
infobox.push("<div>Hello 1</div>"); 
infobox.push("<div>Hello 2</div>"); 

var markers=new Array(); 


for (i = 0; i < position.length; i += 1) { 
// Call function 
createMarkers(position[i], infobox[i], name[i]); 


} 

function createMarkers(position,content,name) { 

    var marker = new google.maps.Marker({ 
     map: theMap, 
     draggable: false, 
     position: position, 
     visible: true, 
     title: name 
    }); 
markers.push(marker); 
    var boxText = document.createElement("div"); 
    boxText.style.cssText = "background: #ffffff; width: 300px; height: 70px; padding: 5px;"; 
    boxText.innerHTML = content; 

    var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-37, -120) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('tipbox.gif') no-repeat" 
      ,opacity: 1 
      ,width: "300px" 
     } 
     ,closeBoxMargin: "5px 5px 5px 5px" 
     ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
    }; 

    google.maps.event.addListener(marker, "click", function (e) { 
     ib.open(theMap, this); 
    }); 

    var ib = new InfoBox(myOptions); 
//ib.open(theMap, marker); 

    } 

} 
function show_marker(){ 

} 
</script> 

</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div><div><a onclick="show_marker()" href="javascript:void(0)">show marker</a></div> 
</body> 
</html>

来源

2011-10-24 aman saini

回答

0

这并不难，因为当您向地图添加信息窗口时，地图会滚动以显示信息窗口。

  1. 制作您的地图。
  2. 让你的侧边栏。
  3. 向地图添加标记，同时向边栏添加元素。请在侧边栏可点击的元素，这样，当你点击它们，你有这样的事情：（这是我自己的网站）

var marker =new google.maps.Marker({ 
    position: new google.maps.LatLng(searchResult.Latitude,searchResult.Longitude), 
    map: googleMap, 
    Title: searchResult.CompanyName 
}); 
$('sideBarElement').addEvent('click', function() { 
    infoWindow.setContent("Some content for your info window."); 
    infoWindow.open(googleMap,marker); 
});

当你.open()和信息窗口时，地图自动平移显示它。

来源

2011-10-24 14:28:45 Oliver

相关问题

 相关问题