Question

我已经为google地图安装了以下带有makeMarker的补充工具栏，它运行正常。但是，我希望侧边栏列表/位置（按钮）也有一个目标网址，以便他们可以在页面上显示/隐藏其他隐藏信息。

var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()

/**
* makeMarker() ver 0.2
* creates Marker and InfoWindow on a Map() named 'map'
* creates sidebar row in a DIV 'sidebar'
* saves marker to markerArray and markerBounds
* @param options object for Marker, InfoWindow and SidebarItem
* @author Esa 2009
*/
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, "click", function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if(this.sidebarButton)this.sidebarButton.button.focus();
});
var idleIcon = pushPin.getIcon();
if(options.sidebarItem){
pushPin.sidebarButton = new SidebarItem(pushPin, options);
pushPin.sidebarButton.addIn("sidebar2");
}
markerBounds.extend(options.position);
markerArray.push(pushPin);
return pushPin;
}

google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
/**
* Creates an sidebar item 
* @constructor
* @author Esa 2009
* @param marker
* @param options object Supported properties: sidebarItem, sidebarItemClassName,   
  sidebarItemWidth,
*/
function SidebarItem(marker, opts){
var tag = opts.sidebarItemType || "button";
var row = document.createElement(tag);
row.innerHTML = opts.sidebarItem;
row.className = opts.sidebarItemClassName || "sidebar_item";  
row.style.display = "block";
row.style.width = opts.sidebarItemWidth || "180px";
row.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
row.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
row.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
if(block && block.nodeType == 1)this.div = block;
else
this.div = document.getElementById(block)
|| document.getElementById("sidebar2")
|| document.getElementsByTagName("body")[0];
this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
if(!this.div) return false;
this.div.removeChild(this.button);
return true;
}
/**
* markers and info window contents
*/
makeMarker({
position: new google.maps.LatLng(39.924186, -75.297571),
title: "Royal Legends VBC",
sidebarItem: "Royal Legends VBC",
content: "Royal Legends VBC"
});   
makeMarker({
position: new google.maps.LatLng(40.152785, -76.750233),
title: "Yorktowne VBC",
sidebarItem: "Yorktowne VBC",
content: "Yorktowne VBC"
});  
makeMarker({
position: new google.maps.LatLng(39.962254, -75.605264),
title: "Lokahi",
sidebarItem: "Lokahi",
content: "Lokahi"
}); 
makeMarker({
position: new google.maps.LatLng(40.152785, -76.750233),
title: "Yorktowne VBC",
sidebarItem: "Yorktowne VBC",
content: "Yorktowne VBC"
});   
/**
*   fit viewport to markers
*/
map.fitBounds(markerBounds);

这是展示和隐藏的jquery。

jQuery(function(){
 jQuery('#showall').click(function(){
       jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
      jQuery('.targetDiv').hide();
      jQuery('#div'+$(this).attr('target')).show();
});
});

非常感谢任何帮助。感谢

Answer 1

通过makeMarker

将更多数据传递到sidebarItem的示例

makeMarker({
    /* new option*/
    target:'somVal',

    position: new google.maps.LatLng(39.924186, -75.297571),
    title: "Royal Legends VBC",
    sidebarItem: "Royal Legends VBC",
    content: "Royal Legends VBC"
});

然后在setItem中的click处理程序：

row.onclick = function(){
     google.maps.event.trigger(marker, 'click');
     jQuery ('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');;

}

相应地调整其他按钮事件处理程序

将目标网址添加到谷歌地图侧边栏按钮

1 个答案: