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
?
