谷歌地图标记标题未显示

时间:2015-07-13 11:05:32

标签: javascript google-maps google-maps-api-3

我正在尝试显示一个地图,其中有五个标记,点击打开五个信息窗口。一切正常,但标记标题。事实上,每当我使用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&amp;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不起作用

1 个答案:

答案 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);
    }
    }
}