之前一直用百度map，但如果是国外的项目就需要用google地图。由于在国内屏蔽了google地图的服务，因此调用的是一个国内地址(开发用)。这个地址没有用key，语言设置也还是中文的。
//-------------------------------------------------------------------------------------------------
备注：网上很多国内的例子还是用v2的接口，差异还是很大的，v3的接口感觉更加接近js的风格，很多参数都直接是json。
还有关于移动端的原生API和web API区别，我在github上看到一篇文章是这样解释的：原生SDK在移动端会好于web API, 因为web API获取GIS地图数据时，是获取一张张的图片然后在前端进行拼接，而SDK是获取地图数据后在前端重画的，其获取数据会小于web api. 当然我想这个解释话，对于卫星图应该两者无差。
//--------------------------------------------------------------------------------------------------
例子中实现了google几个核心类的主要功能，包括：
1、在初始化时，定位到正向解析地址，这里是定位到自由女神像；
2、在地图中间位置初始化一个可拖拽的图标，绑定拖拽结束时间，结束后通过地址逆解析，弹出一个信息提示框；
3、在地图上绑定鼠标右击事件，每个右击事件新增一个图标；
4、在地图上绑定鼠标双击事件，双击后地图移动到初始位置（中间）；
代码如下：
<!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> <title></title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="https://ditu.gdgdocs.org/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> $(function() { initialize(); }); var map = null; function initialize() { var geocoder = new google.maps.Geocoder(); //地址正向解析 geocoder.geocode({ 'address': 'Liberty Island, 10004 New York Harbor' }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var myOptions = { zoom: 12, center: results[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //定义标示 var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, title: 'location', draggable: true }); marker.setMap(map); google.maps.event.addListener(marker, "dragend", function(event) { //逆地址解析 geocoder.geocode({ 'location': event.latLng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var html = '<div>' + results[0].formatted_address + '</div>'; var infowindow = new google.maps.InfoWindow({ content: html }); infowindow.open(map, marker); } }); //单击后在地图上增加一个标示 google.maps.event.addListener(map, 'click', function(event) { var marker1 = new google.maps.Marker({ map: map, position: event.latLng }); marker1.setMap(map); }); //添加双击事件，返回地图中央 google.maps.event.addListener(map, "dblclick", function(evvent) { var center = map.getCenter(); var lat = center.lat(); var lng = center.lng(); var latlng = new google.maps.LatLng(lat, lng); map.setCenter(latlng); }) }); } }); } </script> </head> <body> <div style=" 100%; float: left;"> <div style=" 100%; height: 660px; border: 1px solid #C0C0C0;" id="map_canvas"> </div> </div> </body> </html>