<!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>
googleMap custom
4星 · 超过85%的资源 需积分: 11 85 浏览量
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资源评论
golegend2017-09-12很实用,不过没百度的简单- 「已注销」2017-08-07看图片很好看！
