谷歌地图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>