API学习地址
其实google map的api很简单的,这里是学习文档的传送门http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/articles.html
代码的一些实例
可以国际化的google map
[html] view plaincopy
<script type="text/javascript" 
 src="http://maps.google.com/maps/api/js?sensor=false&language=语言-国家缩写"> 
</script> 
在language后面写上语言国家缩写就可以国际化google map了
Map类
初始化地图的方法:
[javascript] view plaincopy
var myOptions = { 
    zoom : 11, 
    center : new google.maps.LatLng(30.1234567,120.3456789), 
    mapTypeId : google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("mainMapLayer"),myOptions); 
1、center是指地图定位的坐标,需要LatLng对象,对象参数就是纬度和经度
2、mapTypeId是类似枚举的东西,详细参考api
3、mainMapLayer是我的地图div对象的id名,这个div要指明高度和宽度要不地图没法初始化
Marker类、InfoWindow类
添加自定义的marker:
[javascript] view plaincopy
var userMarker = new google.maps.Marker( { 
        position : new google.maps.LatLng(30,120), 
        map : map, 
        title : "鼠标悬浮时提示的信息", 
        icon : "图片位置字符串" 
    }); 
var yourInfoWindow; 
                        
(function(userMarker) { 
    google.maps.event.addListener(userMarker, 'click', function() { 
        if (!yourInfoWindow) { 
            yourInfoWindow = new google.maps.InfoWindow( {}); 
        } 
        yourInfoWindow.setContent(userMarker.title); 
        yourInfoWindow.open(map, userMarker); 
    }); 
})(userMarker); 
1、Marker类是为地图上添加类似小图钉似的提示位置用的东西
2、Marker需要设置坐标和地图对象来初始化
3、同一个Marker对象要重用时使用下面语句重新使用
[javascript] view plaincopy
userMarker.setMap(null); 
4、最后是为marker对象添加点击事件,使用的是嵌套写法(用在for循环里更好使)
5、infowindow是弹出的那个大窗体,他的setContent方法是支持html和css代码的,可以放进去div或table设置样式
LatLngBounds类
Map范围自适应:
[javascript] view plaincopy
var bounds = new google.maps.LatLngBounds(); 
bounds.extend(new google.maps.LatLng(30,120)); 
//为新的结果创建marker 
for ( var i in member) { 
    bounds.extend(new google.maps.LatLng(member[i][2],member[i][3])); 
    var marker = new google.maps.Marker( { 
        position : new google.maps.LatLng(member[i][2], member[i][3]), 
        map : map, 
        title : "title", 
        icon : "p_w_picpathAddress" 
    }); 
    markers.push(marker); 
    //为marker添加infowindow,添加点击事件 
    (function(i, marker) { 
        google.maps.event.addListener( 
            marker, 
            'click', 
            function() { 
                if (!infoawindow) {//单例infowindow 
                    infoawindow = new google.maps.InfoWindow( 
                                                        {}); 
                } 
                infoawindow.open(map, marker); 
        }); 
    })(i, marker); 
} 
map.fitBounds(bounds);//这句最重要 
Geocoder类
提交地址字符串返回经纬度(很好用的功能),查询全靠它
[javascript] view plaincopy
var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode( { 
        'address' : "格式可以是不分割的:北京市东城区东直门,或北京市,东城区,东直门" 
    }, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
            myLatLng = results[0].geometry.location; 
            //results数组里有很多有用的信息,包括坐标和返回的标准位置信息 
        } else { 
            alert(interGeoAnalysisFailed); 
        } 
    }); 
 地图导航服务
[javascript] view plaincopy
var map;    //地图对象   
var mode = google.maps.DirectionsTravelMode.DRIVING;    //谷歌地图路线指引的模式 
var directionsDisplay = new google.maps.DirectionsRenderer();   //地图路线显示对象 
var directionsService = new google.maps.DirectionsService();    //地图路线服务对象 
var directionsVisible = false;  //是否显示路线 
directionsDisplay.setMap(null); 
directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById("directionsPanel")); //将路线导航结果显示到div中     
var request = {origin: findLatLng, destination: marker.position, travelMode: mode, optimizeWaypoints: true, avoidHighways: false,avoidTolls: false}; 
directionsService.route 
( 
    request, 
    function(response, status) 
    { 
        if (status == google.maps.DirectionsStatus.OK) 
        { 
                directionsDisplay.setDirections(response); 
        } 
    } 
); 
directionsVisible = true;

原文地址:http://blog.csdn.net/del1214/article/details/6768605

如果涉及版权问题,请留言与我联系!我会及时删除!