Coldfusion Google Maps和Jquery [英] Coldfusion Google Maps and Jquery
本文介绍了Coldfusion Google Maps和Jquery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个谷歌地图，其中有一个coldfusion查询的动态标记和信息框，我想能够从页面上的链接打开信息窗口，我使用jquery的，但它不工作，什么是最好的方式。
I have a google map which has dynamic markers and info boxes from a coldfusion query, i would like to be able to open the infowindow from a link on the page, i am using jquery for that but it is not working, what is the best way to do it.
我的脚本：
var map;
var lastinfowindow;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#0b9cc1" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{ featureType: "water",
elementType: "geometry",
stylers: [ { visibility: "on" }, { lightness: -10 }] },
{ featureType: "poi",
stylers: [ { visibility: "on" } ] }
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(40, 13);
var mapOptions = {
zoom: 4,
center: latlng,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var image = 'sp-mark.png';
LatLng = new google.maps.LatLng ('23.00593', '120.65287');
var marker38 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
var infowindow38 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: Tiawan</p>"
});
google.maps.event.addListener(marker38, 'click', function() {
infowindow38.open(map,marker38);
marker38.gig_id = 38;
marker38.infowindow = infowindow38;
markers[markers.length] = marker38;
});
LatLng = new google.maps.LatLng ('52.19173', '-1.7083');
var marker30 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 2 - 30',
icon:image
});
var infowindow30 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 2</h3><p>Location: UK</p>"
});
google.maps.event.addListener(marker30, 'click', function() {
infowindow30.open(map,marker30);
marker30.gig_id = 30;
marker30.infowindow = infowindow30;
markers[markers.length] = marker30;
});
LatLng = new google.maps.LatLng ('38.98083', '1.30056');
var marker32 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 3 - 32',
icon:image
});
var infowindow32 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 3</h3><p>Location: Ibiza</p>"
});
google.maps.event.addListener(marker32, 'click', function() {
infowindow32.open(map,marker32);
marker32.gig_id = 32;
marker32.infowindow = infowindow32;
markers[markers.length] = marker32;
});
LatLng = new google.maps.LatLng ('38.96', '1.39861');
var marker41 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 4 - 41',
icon:image
});
var infowindow41 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: Ibiza</p>"
});
google.maps.event.addListener(marker41, 'click', function() {
infowindow41.open(map,marker41);
marker41.gig_id = 41;
marker41.infowindow = infowindow41;
markers[markers.length] = marker41;
});
LatLng = new google.maps.LatLng ('-33.92528', '18.42389');
var marker47 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 5 - 47',
icon:image
});
var infowindow47 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 5</h3><p>Location: Cape Town</p>"
});
google.maps.event.addListener(marker47, 'click', function() {
infowindow47.open(map,marker47);
marker47.gig_id = 47;
marker47.infowindow = infowindow47;
markers[markers.length] = marker47;
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
$(".order").click(function() {
var thisorder = $(this).data("gig_id");
for(var i=0; i<markers.length; i++) {
if(markers[i].gig_id == thisorder) {
console.log("found my match");
//get the latlong
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
console.dir(markers[i]);
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
这是正文：
<style>
#map_canvas {
width: 1250px; height: 550px;
float:left;
}
#orders {
margin-top: 0px;
padding-top: 0px;
margin-left: 10px;
float:left;
height: 550px;
}
.order {
border-style:solid;
border-width:thick;
width: 300px;
padding: 5px;
cursor:pointer;
margin-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="orders">
<p class="order" data-gig_id="38">
<b>Event 38</b><br/>
Event 1
</p>
<p class="order" data-gig_id="30">
<b>Event 30</b><br/>
Event 2
</p>
<p class="order" data-gig_id="32">
<b>Event 32</b><br/>
Event 3
</p>
<p class="order" data-gig_id="41">
<b>Event 41</b><br/>
Event 4
</p>
<p class="order" data-gig_id="47">
<b>Event 47</b><br/>
Event 5
</p>
</div>
</body>
我使用jquery来创建点击功能。
我已经输出结果，地图工作正常，但页面上打开信息窗口的链接不工作，我使用的例子由Raymond Camden。
I am using jquery to create the click function . I have already outputted the results, the map works fine but the links on the page to open the infowindow do not work, i am using an example by Raymond Camden.
任何帮助将非常感激。
推荐答案
您正在尝试将各个标记添加到数组定义。在您的初始化函数的顶部，添加
You are trying to add the individual markers to an array which isn't defined. At the top of your initialize function, add
var markers = [];
这篇关于Coldfusion Google Maps和Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
