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