-1

我正在尝试设置一个自定义的 Google 地图，该地图的旁边会有一个企业目录。

请在本文末尾查看我的示例链接。

您当前可以单击绿色图标并打开自定义弹出窗口，但我需要在侧边栏中的地图上创建公司链接，单击时将在地图上打开相应的弹出窗口。

请让我知道我需要什么，以便在单击地图旁边的侧边栏中的链接时打开每个公司弹出窗口。

这是示例，减去我要询问的侧边栏上的链接：http: //digitour360.com/test-map/

这是我的示例中使用的 Javascript，如果这有助于确定如何调用弹出窗口：

<!-- your api key is used here -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stylizedmap.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
var a = [
"http://2.s3.envato.com/files/29891006/mountains%206.jpg",
"http://0.s3.envato.com/files/29962392/mountains%2014.jpg",
"http://2.s3.envato.com/files/29035356/oetztal_8800.jpg",
"http://1.s3.envato.com/files/22469879/IMG_3536.jpg",
"http://0.s3.envato.com/files/22441185/IMG_6149_2.jpg"
];
var b = [
"http://1.s3.envato.com/files/28915052/Garden.JPG"
];

var sparkles = [
"images/sparkles1.jpg"
];

var accent = [
"images/accent.jpg"
];  

 var dougherty = [
"images/dougherty.jpg"
];

var centurion = [
"images/centurion.jpg"
]; 

var gardner = [
"images/gardner.jpg"
];

$("#map").StylizedMap({
zoomLevel: 17,
styles: $().StylizedMap.styles.gray,
center: {   
lat: 35.884773,
long: -78.745691
},
locations: [{   
lat: 35.884752,
long: -78.74959,
title: 'Accent Imaging, Inc.<br/><a href="http://www.accentimaging.com" target="_blank">www.accentimaging.com&nbsp;&rarr;</a>',
sub_title: "8121 Brownleigh Drive, Raleigh, NC 27617",
slides: accent,
active: true
}, {
lat: 35.885556,
long: -78.749399,
title: 'Sparkles Restoration<br/><a href="http://www.sparkkles.com" target="_blank">www.sparkkles.com&nbsp;&rarr;</a>',
sub_title: "738 Lincoln Road Miami Beach, FL 33139",    
slides: sparkles
}, {
lat: 35.882468,
long: -78.748927,
title: 'Centurion Construction<br/><a href="http://www.centurionconstruction.com" target="_blank">www.centurionconstruction.com&nbsp;&rarr;</a>',
sub_title: "3301 Glen Royal Rd, Raleigh, NC 27617",
slides: centurion
}, {
lat: 35.886834,
long: -78.749587,
title: 'Gardner-Marsh Gas Equipment<br/><a href="http://www.gardnermarsh.com" target="_blank">www.gardnermarsh.com&nbsp;&rarr;</a>',
sub_title: "679 North Michigan Ave. Chicago, IL 60611",
slides: gardner
}, {
lat: 35.885821,
long: -78.749571,
title: 'Dougherty Equipment Company<br/><a href="http://www.doughertyequipment.com" target="_blank">www.doughertyequipment.com&nbsp;&rarr;</a>',
sub_title: "679 North Michigan Ave. Chicago, IL 60611",
slides: dougherty
}, {
lat: 47.6632853,
long: -122.300746,
title: 'Apple Seattle Store',
sub_title: "2656 NE University Village Street Seattle, WA 98105",
slides: b
}, {
lat: 36.1276138,
long: -115.16803270000003,
title: 'Apple Las Vegas store',
sub_title: "3200 Las Vegas Blvd. Las Vegas, NV 89109"
}, {
lat: 30.258303,
long: -97.807986,
title: 'Apple Austin store',
sub_title: "2901 S. Capital of Texas Highway Austin, TX 78746",
slides: b
}]
})
});
</script>
4

1 回答 1

0

当不知道您确切的代码设置方式时，很难准确地说出。

但是，如果您保留对标记、信息窗口（弹出）和地图外链接的引用，那么您可以通过该引用打开信息窗口

html

<a href="javascript:void(0)" onclick="onLinkClick(1)">www.link.com</a>

Javascript

var infowindow = new google.maps.InfoWindow({
  content: contentString
});
var markerArray = [];
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Uluru (Ayers Rock)'
});
markerArray.push(marker);

function findMarker(markerPosition){
 return markerArray[markerPosition];
}


function onLinkClick(markerPosition){
    var marker = findMarker(markerPosition);
    infowindow.open(map,marker)
}

编辑：低代表发表评论。如果您有类似于以下示例的内容：https ://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

然后我会将所有标记推送到一个数组中以供进一步使用。当然也保存对信息窗口的引用。然后你可以像上面的代码一样重用它们。

Edit2：请参阅上面的更改。这是一种粗略的方法，但应该很好用。现在你只需要找到一种方法来实际获得每个链接的正确编号/引用 som 如何

编辑 3：啊，您正在使用一些扩展/包装普通 google.maps-api 的库。实际上，正确使用似乎比仅使用原始 googlemaps-api 更加棘手。老实说，我不知道该库如何重用这些变量。您是否仅使用专门的地图来设置弹出窗口的样式？如果是这样，我肯定会把那个库扔掉，然后去寻找原始的 maps-api。并使用定制的“标记”和定制的“信息窗口”。只不过是一点 css 和标记。非常好的文档：https ://developers.google.com/maps/documentation/javascript/reference

于 2013-08-20T19:39:55.090 回答