google地图图标
1.在指定位置指定一个标记。
var point = new GLatLng(31.22,121.48); //标记的经续度
map.addOverlay(new GMarker(point));
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var point = new GLatLng(31.22,121.48);
map.addOverlay(new GMarker(point));
}
}
//]]>
</script>
</body>
效果地址:http://www.jeeka.com.cn/websoft/googlemap/dingwei.html
2.随机增加10个地图标记
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917,116.397), 14);
var bounds = map.getBounds(); //获取边界
var southWest = bounds.getSouthWest(); //返回矩形西南角的点
var northEast = bounds.getNorthEast();//返回矩形东北角的点
var lngSpan = northEast.lng() - southWest.lng(); //经度坐标差
var latSpan = northEast.lat() - southWest.lat();//纬度坐标差
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()); //设置坐标
map.addOverlay(new GMarker(latlng));//在新层里添加标记
}
}
}
</script>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/10point.html
3.增加自定义图标标记
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var icon=new GIcon();
icon.image="images/psi3.gif";
icon.iconSize = new GSize(16,16); //图片尺寸
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
var mark = new GMarker(
new GLatLng(31.22, 121.48),
{icon:icon, title:"good"}
);//鼠标经过显示good
map.addOverlay(mark);
}
}
//]]>
//
</script>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/xtub.html
4.自定义图标函数addsite：点击弹出框显示对应信息
实现代码:
<script type="text/javascript">
//<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(initialize);
var map = null;
function initialize() {
if ( GBrowserIsCompatible() ) {
map = new google.maps.Map2(document.getElementById('map'));
// O؈Dc
map.setCenter(new GLatLng(25.036772,121.520269), 12);
addSite(map,12,'图标一',25.062361,121.526194,'111',1);
addSite(map,13,'图标二',25.030000,121.490556,'2222',2);
addSite(map,14,'图标三',25.020833,121.528611,'3333',3);
} // if
else {
alert('Ğg[֧ԮGoogle Map');
} // else
}
function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
var icon=new GIcon();
icon.image="images/psi"+type+".gif";
icon.iconSize = new GSize(16,16);
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
var mark = new GMarker(
new GLatLng(lat,lng),
{icon:icon, title:siteDesc}
);
map.addOverlay(mark);
GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('ַ'+address);});
}
//]]>
</script>
</head>
<body onunload="GUnload()">
<div id="map" style="width:500px; height:500px"></div>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/tubiao2.html
var point = new GLatLng(31.22,121.48); //标记的经续度
map.addOverlay(new GMarker(point));
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var point = new GLatLng(31.22,121.48);
map.addOverlay(new GMarker(point));
}
}
</script>
</body>
效果地址:http://www.jeeka.com.cn/websoft/googlemap/dingwei.html
2.随机增加10个地图标记
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917,116.397), 14);
var southWest = bounds.getSouthWest(); //返回矩形西南角的点
var northEast = bounds.getNorthEast();//返回矩形东北角的点
var lngSpan = northEast.lng() - southWest.lng(); //经度坐标差
var latSpan = northEast.lat() - southWest.lat();//纬度坐标差
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()); //设置坐标
map.addOverlay(new GMarker(latlng));//在新层里添加标记
}
}
}
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var icon=new GIcon();
icon.image="images/psi3.gif";
icon.iconSize = new GSize(16,16); //图片尺寸
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
var mark = new GMarker(
new GLatLng(31.22, 121.48),
{icon:icon, title:"good"}
);//鼠标经过显示good
map.addOverlay(mark);
}
}
</script>
</body>
实现代码:
//<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(initialize);
var map = null;
function initialize() {
if ( GBrowserIsCompatible() ) {
map = new google.maps.Map2(document.getElementById('map'));
// O؈Dc
map.setCenter(new GLatLng(25.036772,121.520269), 12);
addSite(map,12,'图标一',25.062361,121.526194,'111',1);
addSite(map,13,'图标二',25.030000,121.490556,'2222',2);
addSite(map,14,'图标三',25.020833,121.528611,'3333',3);
} // if
else {
alert('Ğg[֧ԮGoogle Map');
} // else
}
var icon=new GIcon();
icon.image="images/psi"+type+".gif";
icon.iconSize = new GSize(16,16);
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
new GLatLng(lat,lng),
{icon:icon, title:siteDesc}
);
map.addOverlay(mark);
GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('ַ'+address);});
}
//]]>
</script>
</head>
<div id="map" style="width:500px; height:500px"></div>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/tubiao2.html