如何在自己的网站上加入 GOOGLE MAP 模块

1、先给出代码及显示效果.

2、这是一个最简单的 谷歌地图 Demo.

只需要这样一小段代码,就可以在自己的网站上把 谷歌地图 模块加载进来.

3、解析各段代码的意义:

4、      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

       这一行代码的意思是将google api以链接的形式引入到该页面上.这也是最主要的代码.如果没有这一句代码,下面的各个 google map 函数将不会被浏览器所认可.

5、function initialize() {  var mapOptions = {    zoom: 8,    center: new google.maps.LatLng(-34.397, 150.644)  };  map = new google.maps.Map(document.getElementById('map-canvas'),      mapOptions);}

initialize 是一个加载初始化函数.当网页第一次被加载的时候会被调用,里面是对 谷歌地图的 地图等级,中心点进行相对的设置,同时将其放到自定义的 map-canvas div当中.

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

这句话的意思就是当网页加载完成后,去调用 initialize 函数.从而实现地图载并显示在网页里的效果.

7、下面的地图中,有一个定位点,点击该定位点,可以对其进行地图图层的放大操作,地图中心点的偏移操作.

8、这一段代码主要是添加标记到地图当中,然后对标记的点击事件做出响应.

9、google.maps.event.addListener(map, 'center_changed', function() {    // 3 seconds after the center of the map has changed, pan back to the    // marker.    window.setTimeout(function() {      map.panTo(marker.getPosition());    }, 3000);  });

解析:

      在地图上监听中心点变化时所触发的事件,意思就是说,当地图的中心点被移动到了别的地方,那么会在3秒后,回到以标记点为中心的地图上.

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

    map.setZoom(8);

    map.setCenter(marker.getPosition());

});

    解析:

        对地图上的标记点进行点击的时候,会执行 function里面的函数,也就是将地图的图层等级设置为8,设置地图的中心点为 marker 标记的中心点.