谷歌地图API基础

工作的原因，需要在网页中导入谷歌地图，所以先找了一些很基本的API文档学习，总结如下：

1.要用到谷歌的地图，首先我们需要获取谷歌map的秘钥，这样才能将地图导入到我们的网页中，至于如何获取以及使用秘钥，网上有很多教程，就不赘诉了。

2.html中定义一个具有长宽值得div,用来包裹需要引入的地图，这样，地图的可视区域就是这个div的范围；

3.我们假设在页面加载完全之后开始载入谷歌map; 

<script>google.maps.event.addDomListener(window, 'load', initialize);</script>

4.地图的新建，对地图的操作，我们都会在这个叫initialize的函数中实现，这个函数可以放在3点的script中

<script>
        var myCenter = new google.maps.LatLng(52.508742,-1.120850); //定义需要标记的经纬度  var myCenter1 = new google.maps.LatLng(65.508742,-0.120850); //定义另外一个需要标记的经纬度  var inforstring = '<input type="text"/>'+'<input id="del" type="button" value="del"/>'+'<br>'+'<input type="text"/>'   function initialize() {
            //首先来定义一些地图的属性：  var mapProp = {
// disableDefaultUI:true, //值为true时 将地图上所有控件隐藏  center: new google.maps.LatLng(51.508742, -0.120850),
                //centercenter（中心点）中心属性指定了地图的中心，该中心通过坐标（纬度，经度）在地图上创建一个中心点。  zoom: 5,
                // Zoom（缩放级数）zoom: 0 显示了整个地球地图的完全缩放，显示全球景。  mapTypeId:google.maps.MapTypeId.ROADMAP
// mapTypeId: google.maps.MapTypeId.HYBRID  //mapTypeId 属性指定了地图的初始类型。  // google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层  // google.maps.MapTypeId.ROADMAP：显示普通的街道地图  // google.maps.MapTypeId.SATELLITE：显示卫星图像  // google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图  };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            //在地图上添加标记  var marker = new google.maps.Marker({
                icon: 'icon-1460344176037.png',//可以自定义标记符号  position: myCenter,//添加标记到地图上的位置  draggable: true,//标记可以被拖动  animation: google.maps.Animation.BOUNCE //标记以弹跳的动画效果显示  });
            var marker1 = new google.maps.Marker({
                icon: 'icon-1460344176037.png',//可以自定义标记符号  position: myCenter1,//添加标记到地图上的位置  draggable: true,//标记可以被拖动  animation: google.maps.Animation.BOUNCE //标记以弹跳的动画效果显示  });

            marker.setMap(map);
// marker1.setMap(map);   google.maps.event.addListener(marker, 'dragend', function (MouseEvent) {
                alert(MouseEvent.latLng);//MouseEvent.latLng就是拖拽完成 目的地的经纬度  });


            //定义一个文本窗口  var infowindow = new google.maps.InfoWindow({
                content: "this is...." //文本的内容  });
            infowindow.open(map, marker);

            //点击标记地图放大/缩小  google.maps.event.addListener(marker, 'click', function () {
                map.setZoom(9);
                map.setCenter(marker1.getPosition());
            });

            //重置标记 移动地图 3S后地图中心变化 // google.maps.event.addListener(map, 'center_changed', function () { // window.setTimeout(function () { // map.panTo(marker1.getPosition()); // }, 3000); // });   //点击某个地点打上标记并且弹出文本框  google.maps.event.addListener(map, 'click', function (event) {
                placeMarker(event.latLng);
            });
            function placeMarker(location) {
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
                var infowindow = new google.maps.InfoWindow({
                    content: inforstring  });
                infowindow.open(map, marker);
                var del = document.getElementById("del");
                del.onclick = function(){
                    marker.setMap(null);
                }


            }
        }

        //在页面加载完成之后开始载入地图  google.maps.event.addDomListener(window, 'load', initialize);

    </script>