google地图项目总结

难点1.页面元素与地图联动的方法

//左侧公司与地图联动
   			function addcompanyEvent(data){
   				
				var company = $(".leftcon"); 
				
				for(var i=0;i<company.length;i++){
				   
					google.maps.event.addDomListener(company[i], 'click', function(){}

google.maps.event.addDomListener方法中第一个参数是document对象

难点2 地图全屏和缩小时,除了要改变map容器div的大小,还需要执行方法

           google.maps.event.trigger(map, "resize");

难点3 当需要自定义Marker时,需要导入MarkerWithLabel.js文件

var marker = new MarkerWithLabel({
	   position: point,
	   map: map,
	   labelContent: label,
	   labelAnchor: new google.maps.Point(10, 24),
	   labelClass:"labels",
	   icon:'/map/i/none.png',
	   title:countryCN[data[i].cId][1]+" : "+data[i].cCount
	});

其中labels是marker的样式,如下

.labels {
     color: #9D080D;
     background:url("/map/i/cbg.png");
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 55px;
     height: 26px;
     line-height: 18px;
     white-space: nowrap;
   }

难点4 infowindow样式的自定义(infowindow美化)

导入js文件<script type="text/javascript" src="/js/infobubble.js"></script>

定义infoBubble

var infoBubble = new InfoBubble({
               //backgroundClassName: 'mapOpen',
               shadowStyle: 3,
               padding: 0,
                content: contentString
         });

contentString是html元素

难点5 点击Marker自动隐藏上一个infowindow

     infowindows.push(infoBubble);
     markers.push(marker);
     if(lastIndex!=-1)
      {
              infowindows[lastIndex].close();
              markers[lastIndex].setAnimation(null);
       }
     marker.setAnimation(google.maps.Animation.BOUNCE);
      infoBubble.open(map, marker);      // 打开信息窗口   
      lastIndex=infowindows.indexOf(infoBubble,0);

infowindows是定义的全局变量