googleMapcustom_mapcustom资源-CSDN文库

共9个文件

png：5个

ds_store：1个

js：1个

谷歌地图

4星 · 超过85%的资源需积分: 11 8 浏览量 2015-03-12 15:26:07 上传评论收藏 48KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

FAT - 副本 (5) - 副本.zip （9个子文件）

FAT - 副本 (5) - 副本

gs_infowindow.css 1KB

gs_nmap_marker_detail_star.png 43KB

gs_nmap_marker_point_hotel.png 2KB

gs_nmap_marker_point_funny.png 2KB

GSGoogleMap.html 4KB

ico_map_gs_nmap_marker_point_hotel.png 1KB

.DS_Store 6KB

ico_map_gs_nmap_marker_point_funny.png 1KB

gs_googlemap.js 22KB

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="gs_infowindow.css"> <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?libraries=drawing&sensor=true&language=zhCN"></script> <script type="text/javascript" src="gs_googlemap.js"></script> <script type="text/javascript"> var pointerXOffset=-17; var pointerYOffset=-44; var largeXOffset=-17; var largeYOffset=-44; var markerMainPointWidth=22; var markerMainPointHeight=31; var markerNormalPointWidth=18; var markerNormalPointHeight=26; var mGmap; var centerLat=31.2399;//东方明珠坐标 var centerLon=121.4996; function initialize() { mGmap=new GMap(0); mGmap.init("map_canvas"); var latLon= mGmap.LatLng(centerLat,centerLon); mGmap.setCenter(latLon); var overlay3= new USGSOverlay(getLargeView(),mGmap.LatLng(31.2399,121.4996),{x:largeXOffset,y:largeYOffset},'infobox','m'); mGmap.addOverlay('infobox',overlay3); overlay3.bind("click",function(event){ var box=mGmap.getOverlay('infobox','m'); //box.hide(); }); var overlay1= new USGSOverlay(getPointView(),mGmap.LatLng(31.2399,121.4996),{x:pointerXOffset,y:pointerYOffset},'infobox','m'); mGmap.addOverlay('infobox',overlay1); overlay1.bind("click",function(event){ var box=mGmap.getOverlay('infobox','m'); //box.hide(); }); } function getLargeView() { //config start var bgColor="#41AFEA"; var borderColor="#058BBC"; var contentText="Hello GoogleMap!Hello GoogleMap!Hello GoogleMap!Hello GoogleMap!"; //config end var htmlObj=document.createElement("div"); var fav=document.createElement("div"); fav.className = "fav" fav.innerHTML = "<img src='gs_nmap_marker_detail_star.png' />"; htmlObj.appendChild(fav); var containerHeight=32;//34px --2px border⁄ var containerWidth=100;//102px var contentWidth=containerWidth-(4+4+2);//margin=4,border=2 var contentHeight=containerHeight-(4+4+2); var sLeft=(containerWidth-20)/2; var sTop=containerHeight+1; largeXOffset=-containerWidth/2+4; largeYOffset=-containerHeight-12-(markerMainPointHeight-6);//26 31 point height htmlObj.className = "container"; htmlObj.style.background=bgColor; htmlObj.style.borderColor=borderColor; htmlObj.style.width=containerWidth+"px"; htmlObj.style.height=containerHeight+"px"; var textNode=document.createTextNode(contentText); var elementD=document.createElement("div"); var elementS=document.createElement("s"); var elementI=document.createElement("i"); elementD.className = "content"; elementD.style.width=contentWidth+"px"; elementD.style.height=contentHeight+"px"; elementD.appendChild(textNode); elementS.appendChild(elementI); elementI.style.borderTopColor=bgColor; elementS.style.borderTopColor=borderColor; htmlObj.appendChild(elementD); htmlObj.appendChild(elementS); return htmlObj; } function getPointView() { //22*31 == mainpoi //18*26 == collect & normal var imgWidth=markerMainPointWidth; var imgHeight=markerMainPointHeight; pointerXOffset=-imgWidth/2+5; pointerYOffset=-imgHeight+5; var htmlObj = document.createElement("div"); htmlObj.className = "imgContainer"; htmlObj.innerHTML = "<img src='ico_map_gs_nmap_marker_point_funny.png' width="+imgWidth+"px height="+imgHeight+"px/>"; return htmlObj; } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 600px"></div> </body> </html>

评论收藏

内容反馈