如何在谷歌地图中设置多个信息窗口，但使用这种特定的JavaScript方法
how to set multiple infowindows in google maps but with this particular javascript method
我看了一遍，尽管到处都有大量的指令、技术和 javascript 代码来说明如何做到这一点，但我不能使用它们中的任何一个，因为它需要重写我所有的 JavaScript 和 php。是否有我可以放入我正在使用的此方法的信息窗口的代码？
我正在读取一个 csv 文件并使用此库 （https://github.com/parsecsv/parsecsv-for-php） 解析数据，然后我使用此图标库在地图上放置标记 （https://github.com/scottdejonge/map-icons）。 现在我需要为每个标记添加信息窗口（它显示csv文件的第一列数据），我不知道该怎么做。我并不是说我不知道要使用的 php 变量，这部分很容易。我的意思是我不知道要使用什么信息窗口JavaScript。
我将粘贴整个 html 页面以及 csv 文件的内容。
<?php
# include parseCSV class.
require_once('../parsecsv.lib.php');
# create new parseCSV object.
$csv = new parseCSV();
# Parse 'test.csv' using automatic delimiter detection...
$csv->auto('test.csv');
# ...or if you know the delimiter, set the delimiter character
# if its not the default comma...
// $csv->delimiter = "'t"; # tab delimited
# ...and then use the parse() function.
// $csv->parse('test.csv');
# Output result.
//echo "<pre>";
//print_r($csv->data);
//echo "</pre>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Icons Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Map Icons -->
<link rel="stylesheet" type="text/css" href="../dist/css/map-icons.css">
<script type="text/javascript" src="../dist/js/map-icons.js"></script>
<script type="text/javascript">
function initialise() {
var mapCanvas = document.getElementById('map-canvas');
// Center
var center = new google.maps.LatLng(-27.46834, 153.02365);
// Map Options
var mapOptions = {
zoom: 16,
center: center,
scrollwheel: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{stylers: [{ visibility: 'simplified' }]},
{elementType: 'labels', stylers: [{ visibility: 'off' }]}
]
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
<?php
$i=1;
$extendthis = "";
foreach ($csv->data as $key => $row):
// We define our address
$fulladdress = $row['address'].",".$row['city'].",".$row['state'].",".$row['zip'];
$marker = $row['marker'];
$icon = $row['icon'];
$fillcolor = $row['fillcolor'];
//if no marker or icon or fillcolor is set, use default ones...
if ($marker=="") {
$marker = "MAP_PIN";
}
if ($icon=="") {
$icon = "";
}
if ($fillcolor=="") {
$fillcolor = "6331AE";
}
// We get the JSON results from this request
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($fulladdress).'');
// We convert the JSON to an array
$geo = json_decode($geo, true);
// If everything is cool
if ($geo['status'] = 'OK') {
// We set our values
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}
echo "var Item_".$i." = new google.maps.LatLng(".$latitude.", ".$longitude.");'n";
echo "var marker1 = new Marker({'n";
echo "map: map,'n";
echo "title: 'Uluru (Ayers Rock)','n";
echo "position: Item_".$i.",'n";
echo "icon: {'n";
echo "path: ".$marker.",'n";
echo "fillColor: '#".$fillcolor."','n";
echo "fillOpacity: 1,'n";
echo "strokeColor: '','n";
echo "strokeWeight: 0'n";
echo "},'n";
echo "map_icon_label: '<span class='"map-icon ".$icon."'"></span>''n";
echo "});'n";
$extendthis .= "bounds.extend(Item_".$i.");'n";
$i++;
endforeach;
?>
var bounds = new google.maps.LatLngBounds();
<?php echo $extendthis; ?>
map.fitBounds(bounds);
};
google.maps.event.addDomListener(window, 'load', initialise);
</script>
<style media="screen">
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
}
#map-canvas {
padding:0;
margin: 0;
width: 50%;
height: 50%;
}
table { background-color: #BBB; }
th { background-color: #EEE; }
td { background-color: #FFF; }
</style>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="3">
<tr>
<?php foreach ($csv->titles as $value): ?>
<th><?php echo $value; ?></th>
<?php endforeach; ?>
</tr>
<?php foreach ($csv->data as $key => $row): ?>
<tr>
<?php foreach ($row as $value): ?>
<td><?php echo $value; ?></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</table>
<div id="map-canvas"></div>
</body>
</html>
测试.csv：
name,address,city,state,zip,marker,icon,fillcolor
one,7505 3rd Street,Schenectady,NY,12302,,,
two,6422 Route 29,Bear,DE,19701,MAP_PIN,,00CCBB
three,2858 Lakeview Drive,Venice,FL,34293,,,
four,335 Lincoln Street,Augusta,GA,30906,,,
five,3907 Cardinal Drive,San Antonio,TX,78213,SQUARE_PIN,,00CCBB
six,8560 State Street,Drexel Hill,PA,19026,,,
更新版本，但仍然无法正常工作：
<script type="text/javascript">
var iw;
function initialise() {
var mapCanvas = document.getElementById('map-canvas');
// Center
var center = new google.maps.LatLng(-27.46834, 153.02365);
// Map Options
var mapOptions = {
zoom: 16,
center: center,
scrollwheel: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{stylers: [{ visibility: 'simplified' }]},
{elementType: 'labels', stylers: [{ visibility: 'off' }]}
]
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
iw = new google.maps.InfoWindow();
<?php
$i=1;
$extendthis = "";
foreach ($csv->data as $key => $row):
$name = $row['name'];
// We define our address
$fulladdress = $row['address'].",".$row['city'].",".$row['state'].",".$row['zip'];
$marker = $row['marker'];
$icon = $row['icon'];
$fillcolor = $row['fillcolor'];
//if no marker or icon or fillcolor is set, use default ones...
if ($marker=="") {
$marker = "MAP_PIN";
}
if ($icon=="") {
$icon = "";
}
if ($fillcolor=="") {
$fillcolor = "6331AE";
}
// We get the JSON results from this request
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($fulladdress).'');
// We convert the JSON to an array
$geo = json_decode($geo, true);
// If everything is cool
if ($geo['status'] = 'OK') {
// We set our values
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}
echo "var Item_".$i." = new google.maps.LatLng(".$latitude.", ".$longitude.");'n";
echo "var marker".$i." = new Marker({'n";
echo "map: map,'n";
//echo "title: 'your title here','n";
echo "content: '".$name."','n";
echo "position: Item_".$i.",'n";
echo "icon: {'n";
echo "path: ".$marker.",'n";
echo "fillColor: '#".$fillcolor."','n";
echo "fillOpacity: 1,'n";
echo "strokeColor: '','n";
echo "strokeWeight: 0'n";
echo "},'n";
echo "map_icon_label: '<span class='"map-icon ".$icon."'"></span>''n";
echo "});'n";
echo "marker".$i.".addListener('click',function(m) { iw.setContent(m.content);iw.open(map,m); });'n";
$extendthis .= "bounds.extend(Item_".$i.");'n";
$i++;
endforeach;
?>
var bounds = new google.maps.LatLngBounds();
<?php echo $extendthis; ?>
map.fitBounds(bounds);
};
google.maps.event.addDomListener(window, 'load', initialise);
</script>
您只需一个信息窗口即可解决此问题：
定义一个全局变量来存储信息窗口。为了供单击事件使用，它应该是全局的。为此，请在函数外部定义它：
<script type="text/javascript">
var iw;
function initialise() {
...
然后在初始化函数中实例化一个新的信息窗口：
function initialise() {
iw=new google.maps.InfoWindow();
...
您可以向标记添加自定义属性。例如，说"内容"并在那里设置标记信息窗口的内容：
echo "var marker$i = new Marker({content:'content for current marker here','n";
...
然后向标记添加点击事件：
echo "marker$i.addListener('click',function(e) { iw.setContent(this.content);iw.open(map,this); });";
相关文章：
- object.仅冻结对象方法.JavaScript
- 快速方法 Javascript/Jquery/etc 检索表单中包含的所有 aspnet:textbox (input）
- 查看整个画布是否被涂成一种颜色的方法.Javascript + processing.js
- 从方法 JavaScript 访问对象变量
- pop(）方法javascript没有给出完整的输出
- 如何格式化setInterval方法JavaScript的运行时间
- 正则表达式/替换方法Javascript
- 将vars传递给其他方法javascript
- 寻找一种简化if/else语句的方法.javascript
- focus(）或select(）方法javascript，在Chrome中性能缓慢
- 未捕获的类型错误:对象没有方法..Javascript
- 对象方法javascript中的方法/函数
- 构造函数中的私有方法(Javascript，坏主意?）
- 查看数组是否有数组的最简单方法?Javascript
- 扁平化数组元素(不是整个数组）的有效方法JavaScript
- 最常用的生成PDF报告的方法(JavaScript，node.js）
- 创建多维数组与地图方法:javascript
- 对象方法Javascript HTML DOM中的多个事件监听器
- 卡住了.adddeventlistener不能在属性内处理我的方法.Javascript
- 任何获取文档选择的x、y、w、h的方法(JavaScript)
