分享下Google Maps Javascript API v3

w290601645 2011-10-25 03:09:43

都是些基础的东西，没啥技术含量，也都是Google的东西，小小总结下，大家别见笑。希望能给那些想搞Map一些帮助。



<html>

  <head>

    <title>Google Maps JavaScript API v3 Example: Event Closure</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="UTF-8">

    <link href="http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/examples/default.css"

        rel="stylesheet" type="text/css">

    <script type="text/javascript"

        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

      function initialize() {

        var myOptions = {

          zoom: 4,

          center: new google.maps.LatLng(23.594194602806904,121.44287121875004),

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),

            myOptions);



        google.maps.event.addListener(map, 'click', function(e) {

          placeMarker(e.latLng, map);

        });

      }



      function placeMarker(position, map) {

        //获取坐标  

        alert("Position:" +position );

      }



      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

    <div id="map_canvas"></div>

  </body>

</html>



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Google Maps JavaScript API v3 Example: Event Closure</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <meta charset="UTF-8" />

    <link href="http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/examples/default.css"

        rel="stylesheet" type="text/css" />

    <script type="text/javascript"

        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

      //定位

      function initialize() {

        var myOptions = {

          zoom: 12,

          center: new google.maps.LatLng(31.980123613394546,118.80615246875004),

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };        

        var map = new google.maps.Map(document.getElementById('map_canvas'),

            myOptions);

            

        //machao 添加标记

        var myLatLng = new google.maps.LatLng(31.980123613394546,118.80615246875004);    

        var marker = new google.maps.Marker({

            position:myLatLng,map:map,title:"Hello Google Map"

        });

        

        var zoomLevel;

        //显示图片

        var showImg = "<img src='img/20111024155228.jpg' />"+"<span>Hello,Google map</span>";

        var infowindow = new google.maps.InfoWindow({

            content:showImg,

            size:new google.maps.Size(50,50),

            position:myLatLng

        });

        infowindow.open(map);

	google.maps.event.addListener(marker,'click',function(){

            infowindow.open(map);

        });       

      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

    <div id="map_canvas"></div>

  </body>

</html>