我正在尝试显示一个地图,其中有五个标记,点击打开五个信息窗口。一切正常,但标记标题。事实上,每当我使用Firefox时,它们都是隐形的,而当我使用Chrome浏览器时,它们是可见的。
这是html部分,我使用谷歌地图api V3使地图可见
<!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/maps.js"></script>
<!-- begin snippet: js hide: false -->
</head>
<body onload="initialize('center0')">
<div id="center0" class="ccenter0">
</div>
</body>
</html>
在下面的js代码中,第一个函数使地图可见并调用caricaArray函数,第二个函数在地图上添加标记,第三个函数加载包含infowindows和markers属性的数组,在最后for循环的最后一个函数循环在地图上添加制作者的函数。在代码的开头,我创建了一个其属性被调用的对象
function myObj()
{
this.id = 0;
this.score = 0;
this.title = "";
this.latitude = 0;
this.longitude = 0;
this.content = "";
this.icon = "";
this.mymarker;
this.myinfowin;
//this.latlon = 0;
this.getlatlng = function() {
return new google.maps.LatLng(this.latitude, this.longitude);
};
return this;
}
//blocco dichiarazioni variabili
var myitems = new Array();
var mlat = 0;
var mlon = 0;
var mnum = 0;
//var myinfowin = [];
//var mymarker = [];
var map;
//inizializzo la mappa
function initialize(x) {
var latlng = new google.maps.LatLng(41.882944, 12.568310);
var mapOptions = {
zoom: 16,
center: latlng
}
map = new google.maps.Map(document.getElementById(x), mapOptions);
caricaArray();
}
//aggiungo i marker e la infowindow dentro la funzione
function addMarker(a){
myitems[a].mymarker = new google.maps.Marker({
position: myitems[a].getlatlng(),
map: map,
title: myitems[a].title,
icon: myitems[a].icon,
animation: google.maps.Animation.DROP
});
myitems[a].myinfowin = new google.maps.InfoWindow({
content: myitems[a].content});
google.maps.event.addListener(myitems[a].mymarker, 'click', function() {
myitems[a].myinfowin.open(map,this);
});
}
//dentro la funzione searcaddress richiamo la funzione addmarker
/*function searchAddress(){
for(var i = 0; i < myitems.length; i++) {
myitems[i].
}
}
*/
function caricaArray(){
var i = 0;
myitems[i] = new myObj();
//myitems[i].id = parseInt(a[p]);
// myitems[i].score = parseFloat(a[p+1]);
myitems[i].title = "Paolo";
myitems[i].latitude = parseFloat(41.882944);
myitems[i].longitude = parseFloat(12.568310);
//myitems[i].content = a[p+5] + "<br/>" + a[p+6];
myitems[i].content = "ciao da paolo e riccardo";
myitems[i].icon = 'img/blue-dot.png';
//p = p + l;
if (myitems[i].latitude > 0){
if (myitems[i].longitude > 0){
mlat=mlat+myitems[i].latitude;
mlon=mlon+myitems[i].longitude
mnum=mnum+1
}
}
i = i+ 1;
myitems[i] = new myObj();
//myitems[i].id = parseInt(a[p]);
// myitems[i].score = parseFloat(a[p+1]);
myitems[i].title = "Galasso";
myitems[i].latitude = parseFloat(41.882885);
myitems[i].longitude = parseFloat(12.568805);
//myitems[i].content = a[p+5] + "<br/>" + a[p+6];
myitems[i].content = "ciao da Galasso";
myitems[i].icon = 'img/red-dot.png';
//p = p + l;
if (myitems[i].latitude > 0){
if (myitems[i].longitude > 0){
mlat=mlat+myitems[i].latitude;
mlon=mlon+myitems[i].longitude
mnum=mnum+2
}
}
i = i + 1;
myitems[i] = new myObj();
//myitems[i].id = parseInt(a[p]);
// myitems[i].score = parseFloat(a[p+1]);
myitems[i].title = "Riccardo";
myitems[i].latitude = parseFloat(41.882286);
myitems[i].longitude = parseFloat(12.559539);
//myitems[i].content = a[p+5] + "<br/>" + a[p+6];
myitems[i].content = "ciao da Riccardo";
myitems[i].icon = 'img/purple-dot.png';
//p = p + l;
if (myitems[i].latitude > 0){
if (myitems[i].longitude > 0){
mlat=mlat+myitems[i].latitude;
mlon=mlon+myitems[i].longitude
mnum=mnum+1
}
}
/*if ( mnum > 0){
mlat=mlat/mnum;
mlon=mlon/mnum;
var mzoom = 16;
map.setCenter(new google.maps.LatLng(mlat,mlon), mzoom);
}
*/
for (i=0;i<myitems.length;i++){
if (myitems[i].latitude > 0){
addMarker(i);
}
}
}
console.log(title);
console.log返回title
未在我使用的任何浏览器上定义,而仅在Firefox上title
不起作用
答案 0 :(得分:1)
为了让我的代码工作,我必须添加属性
optimized
type boolean设置为false。这样标记显示标题号 对浏览器而言
这是javascript工作代码:
function myObj()
{
this.id = 0;
this.score = 0;
this.title = "";
this.latitude = 0;
this.longitude = 0;
this.content = "";
this.icon = "";
this.mymarker;
this.myinfowin;
//this.latlon = 0;
this.getlatlng = function() {
return new google.maps.LatLng(this.latitude, this.longitude);
};
return this;
}
//blocco dichiarazioni variabili
var myitems = new Array();
var mlat = 0;
var mlon = 0;
var mnum = 0;
//var myinfowin = [];
//var mymarker = [];
var map;
//inizializzo la mappa
function initialize(x) {
var latlng = new google.maps.LatLng(41.882944, 12.568310);
var mapOptions = {
zoom: 16,
center: latlng
}
map = new google.maps.Map(document.getElementById(x), mapOptions);
caricaArray();
}
//aggiungo i marker e la infowindow dentro la funzione
function addMarker(a){
myitems[a].mymarker = new google.maps.Marker({
position: myitems[a].getlatlng(),
map: map,
title: myitems[a].title,
icon: myitems[a].icon,
optimized: false, // every marker is a separate DOM element
animation: google.maps.Animation.DROP
});
myitems[a].myinfowin = new google.maps.InfoWindow({
content: myitems[a].content});
google.maps.event.addListener(myitems[a].mymarker, 'click', function() {
myitems[a].myinfowin.open(map,this);
});
}
//dentro la funzione searcaddress richiamo la funzione addmarker
/*function searchAddress(){
for(var i = 0; i < myitems.length; i++) {
myitems[i].
}
}
*/
function caricaArray(){
var i = 0;
myitems[i] = new myObj();
//myitems[i].id = parseInt(a[p]);
// myitems[i].score = parseFloat(a[p+1]);
myitems[i].title = "xx1";
myitems[i].latitude = parseFloat(41.882944);
myitems[i].longitude = parseFloat(12.568310);
//myitems[i].content = a[p+5] + "<br/>" + a[p+6];
myitems[i].content = "ciao da paolo e riccardo";
myitems[i].icon = 'img/blue-dot.png';
//p = p + l;
if (myitems[i].latitude > 0){
if (myitems[i].longitude > 0){
mlat=mlat+myitems[i].latitude;
mlon=mlon+myitems[i].longitude
mnum=mnum+1
}
}
i = i+ 1;
myitems[i] = new myObj();
//myitems[i].id = parseInt(a[p]);
// myitems[i].score = parseFloat(a[p+1]);
myitems[i].title = "xx2";
myitems[i].latitude = parseFloat(41.882885);
myitems[i].longitude = parseFloat(12.568805);
//myitems[i].content = a[p+5] + "<br/>" + a[p+6];
myitems[i].content = "ciao da Galasso";
myitems[i].icon = 'img/red-dot.png';
//p = p + l;
if (myitems[i].latitude > 0){
if (myitems[i].longitude > 0){
mlat=mlat+myitems[i].latitude;
mlon=mlon+myitems[i].longitude
mnum=mnum+1
}
}
i = i + 1;
myitems[i] = new myObj();
//myitems[i].id = parseInt(a[p]);
// myitems[i].score = parseFloat(a[p+1]);
myitems[i].title = "zz2";
myitems[i].latitude = parseFloat(41.882286);
myitems[i].longitude = parseFloat(12.559539);
//myitems[i].content = a[p+5] + "<br/>" + a[p+6];
myitems[i].content = "ciao da Riccardo";
myitems[i].icon = 'img/purple-dot.png';
//p = p + l;
if (myitems[i].latitude > 0){
if (myitems[i].longitude > 0){
mlat=mlat+myitems[i].latitude;
mlon=mlon+myitems[i].longitude
mnum=mnum+1
}
}
/*if ( mnum > 0){
mlat=mlat/mnum;
mlon=mlon/mnum;
var mzoom = 16;
map.setCenter(new google.maps.LatLng(mlat,mlon), mzoom);
}
*/
for (i=0;i<myitems.length;i++){
if (myitems[i].latitude > 0){
addMarker(i);
}
}
}