这是加载使程序运行所需的所有文件的html代码
<!DOCTYPE html>
<html>
<head>
<title>Accessibilita</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="http://maps.google.com/maps/api/js?signed_in=true&key=AIzaSyD3Xz7-z7U_XzZiaOlx9khhtFSld8vd0k4"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/marker_json.js"></script>
</head>
<body>
<header class="header">
<ul id="c0">
<li><img class="img1" src="img/BorghiArtistici.jpg" /></li>
<li><img class="img2" src="img/logo2municipio.jpg" /></li>
<li><img class="img3" src="img/RegioneLazio.jpg" /></li>
</ul>
</header>
<div id="map-canvas" class="my-map"></div>
<div id="panel">
<input id="address" type="textbox" value="" placeholder="inserisci parametri di ricerca...">
<input type="button" value="Cerca" onclick="searchAddress()">
<input type="button" value="Cancella" onclick="removeAddress()">
</div>
</body>
</html>
这是导致地图显示的css代码
html, body,
#map-canvas {
margin: 5px;
padding: 0px;
}
.my-map {
height: 50%;
width: 50%;
position: absolute;
top: 35%;
left: 6.5%;
border: outset;
}
#panel {
position: absolute;
top: 25%;
left: 16%;
margin-left: -180px;
z-index: 5;
background-color: #FFF;
padding: 5px;
width: 50%;
}
#address{
text-align: left;
font-weight: bold;
font-style: italic;
width: 70%;
}
.img1 {
width: 10%;
height: 20%;
position: absolute;
left: 0%;
top: 0%;
}
.img2 {
width: 20%;
height: 20%;
top: 0%;
left: 30%;
position: absolute;
}
.img3 {
width: 20%;
height: 20%;
position: absolute;
top: 0%;
left: 60%;
}
.header {
margin-bottom: 10px;
}
/*float menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
#C0
{
z-index: -1;
}
这是javascript文件，它使得json文件的异步加载在代码中被解析并在函数内部被调用以使标记和infowindow对象可见。在这个文件中，我使用onclick事件创建和删除标记，只要＆＃34; cerca＆＃34;按钮和＆＃34; cancella＆＃34;点击按钮
var map;
var arr = [];
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(41.897097, 12.513234)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
var xmlhttp = new XMLHttpRequest();
var url = "json/marker_json.json";
var arr;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
arr = JSON.parse(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
var infowindow = [];
var marker = [];
function searchAddress(){
for(var i = 0; i < arr.length; i++) {
(function(i){ //new line
infowindow[i] = new google.maps.InfoWindow({
title: arr[i].title,
content: arr[i].content
});
marker[i] = new google.maps.Marker({
title: arr[i].title,
icon: arr[i].icon,
size: arr[i].size,
coords: arr[i].coords,
type: arr[i].type,
draggable: false,
//map: map,
animation: google.maps.Animation.DROP,
//animation: google.maps.Animation.BOUNCE,
position: new google.maps.LatLng(arr[i].latitude,arr[i].longitude)
});
marker[i].setMap(map)
google.maps.event.addListener(marker[i], 'click', function() {
infowindow[i].open(map,this);
});
})(i); //new line
}
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < marker.length; i++) {
marker[i].setMap(map);
}
}
function removeAddress(){
setAllMap(null);
arr = [];
}
这是json文件，其中包含要在地图中显示的所需信息
[
{
"title": "Coop.Sociale Prassi e Ricerca Onlus",
"latitude": 41.897115,
"longitude": 12.513300,
"content": "Cooperativa fornitrice di servizi sociali,<br/> Viale Eleonora D'Arborea 12<br/> 00162 Roma<br/> <a href='http://www.prassiericerca.com' target='_blank'>Prassi e Ricerca</a>",
"icon": "img/orange-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "San Lorenzo",
"latitude": 41.897379,
"longitude": 12.513272,
"content": "Penelope e altri servizi <a href='http://www.borghiartistici.com' target='_blank'>Borghi Artistici S.r.l.</a>",
"icon": "img/green-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "Giardinetti",
"latitude": 41.898055,
"longitude": 12.515112,
"content": "ehi siamo in periferia <a href='http://www.eminem.com' target='_blank'>Eminem Official Web Site</a>",
"icon": "img/red-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "Montesacro",
"latitude": 41.897825,
"longitude": 12.516436,
"content": "siamo a roma nord <a href='http://www.facebook.com' target='_blank'>Facebook Home Page</a>",
"icon": "img/yellow-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "Casa",
"latitude": 41.899330,
"longitude": 12.516023,
"content": "siamo a casa mia che volete?ahah <a href='http://twitter.com' target='_blank'>Twitter Home Page</a>",
"icon": "img/prassi.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "C'era una volta il caffe",
"latitude": 41.899998,
"longitude": 12.517145,
"content": "Bar Tabacchi, Caffe, Aperitivo, Cocktails, Lotto, Bollette",
"icon": "img/orange-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
}
]
我真的希望我的代码足够清晰，您可以找到解决我目前正在处理的问题的方法：一旦标记被删除，我就无法重新创建它们
答案 0 :(得分：0)
这个问题有点陈旧，但我不禁注意到......为什么要删除数组呢？只需在removeAddress()方法中注释一行：
function removeAddress(){
setAllMap(null);
//arr = []; --let array stay in memory, so that setMap(map) can again display markers
}