代码改变世界

利用 Google API 调用谷歌地图 演示12

2010-08-06 20:39  音乐让我说  阅读(874)  评论(2)  编辑  收藏  举报

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>演示12</title>
    <style type="text/css">
        html { height: 100%; }
        body { height: 100%; margin: 0px; padding: 0px; }
        #map_canvas { width:50%; height: 50%; margin: 50px auto; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize()
        {
            var myOptions = {
                zoom: 10,
                center: new google.maps.LatLng(22.95, 113.4),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            setMarkers(map, beaches);
        }

        /**
        * Data for the markers consisting of a name, a LatLng and a zIndex for
        * the order in which these markers should display on top of each
        * other.
        */
        var beaches = [
          ['番禺城市E', 22.95, 113.7, 4],
          ['番禺城市D', 22.95, 113.65, 5],
          ['番禺城市C', 22.95, 113.6, 3],
          ['番禺城市B', 22.95, 113.55, 2],
          ['番禺城市A', 22.95, 113.5, 1]
        ];
        function setMarkers(map, locations)
        {
            // Add markers to the map

            // Marker sizes are expressed as a Size of X,Y
            // where the origin of the image (0,0) is located
            // in the top left of the image.

            // Origins, anchor positions and coordinates of the marker
            // increase in the X direction to the right and in
            // the Y direction down.
            var image = new google.maps.MarkerImage('/images/beachflag.png',
            // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
      new google.maps.Point(0, 0),
            // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
            var shadow = new google.maps.MarkerImage('/images/beachflag_shadow.png',
            // The shadow image is larger in the horizontal dimension
            // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 32));
            // Shapes define the clickable region of the icon.
            // The type defines an HTML <area> element 'poly' which
            // traces out a polygon as a series of X,Y points. The final
            // coordinate closes the poly by connecting to the first
            // coordinate.
            var shape = {
                coord: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
            };
            for (var i = 0; i < locations.length; i++)
            {
                var beach = locations[i];
                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    shadow: shadow,
                    icon: image,
                    shape: shape,
                    title: beach[0],
                    zIndex: beach[3]
                });
            }
        }

    </script>

</head>
<body onload="initialize()">
    <div id="map_canvas">
    </div>
</body>
</html>

 

效果图如下：

 

谢谢浏览！