当前位置: 代码迷 >> Web前端 >> 谷歌地图作定位小图标,并做出定位事件,事件窗口
  详细解决方案

谷歌地图作定位小图标,并做出定位事件,事件窗口

热度:106   发布时间:2012-07-04 19:33:54.0
谷歌地图做定位小图标,并做出定位事件,事件窗口

?
?


?
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>谷歌地图测试</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;" type="text/javascript"></script>
     
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
                                                map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(22.55, 114.09),15);
			// Create our "tiny" marker icon
			var baseIcon = new GIcon();
			baseIcon.iconSize = new GSize(40,49);
			baseIcon.iconAnchor = new GPoint(9, 34);
			baseIcon.infoWindowAnchor = new GPoint(9, 2);
			baseIcon.infoShadowAnchor = new GPoint(18, 25);

			function createMarker(point, index) {
				  // Create a lettered icon for this point using our icon class
				  var icon = new GIcon(baseIcon);
				  icon.image = "dituicon.gif";
				  var marker = new GMarker(point, icon);

				  GEvent.addListener(marker, "click", function() {
					  marker.openInfoWindowHtml("welcome shengzhen");
				  });
				  return marker;
			}

               
			// Add 10 markers to the map at random locations
			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 < 30; i++) {
			   var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
									  southWest.lng() + lngSpan * Math.random());
			   map.addOverlay(createMarker(point, i));
			}
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1200px; height: 600px"></div>
  </body>
</html>

?定们小图标为:

?

  相关解决方案