路线说明
一个最有用的特性之一是Google Maps API可以为任何指定的位置提供详细的路线说明,实现代码如下:
- CodevardirectionsDisplay;
- vardirectionsService = newgoogle.maps.DirectionsService();
- functionInitializeMap() {
- directionsDisplay = newgoogle.maps.DirectionsRenderer();
- varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);
- varmyOptions =
- {
- zoom: 8,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- varmap = newgoogle.maps.Map(document.getElementById("map"), myOptions);
- directionsDisplay.setMap(map);
- directionsDisplay.setPanel(document.getElementById(''directionpanel''));
- varcontrol = document.getElementById(''control'');
- control.style.display = ''block'';
- }
- calcRoute() {
- varstart = document.getElementById(''startvalue'').value;
- varend = document.getElementById(''endvalue'').value;
- varrequest = {
- origin: start,
- destination: end,
- travelMode: google.maps.DirectionsTravelMode.DRIVING
- };
- directionsService.route(request, (response, status) {
- if(status== google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
- functionwindow.onload = InitializeMap;
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="http://images.myeducs.cn/files/uploadimg/20111202/10005813.png" />
Layers
Google Maps API为你提供了多层的选项,其中有一个是自行车层。通过自行车层,可以为一些特别的位置显示自行车路线。下面的代码是让你在地图上添加自行车层:
- Codevarmap
- functionInitializeMap() {
- varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);
- varmyOptions = {
- zoom: 8,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- map = newgoogle.maps.Map(document.getElementById("map"), myOptions);
- }
- window.onload = InitializeMap;
- varbikeLayer = newgoogle.maps.BicyclingLayer();
- bikeLayer.setMap(map);
Geocoding
到目前为止,我们已经学习创建Google地图的基本思想,同时也学习了如何显示位置相关的信息。下面我们来看看用户是如何来计算位置的,Geocoding可以计算出指定区域的经度和纬度,下面的代码就告诉你如何利用API计算某个位置的经度和纬度的:
- Codegeocoder.geocode({ ''address'': address }, function(results, status) {
- if(status== google.maps.GeocoderStatus.OK) {
- map.setCenter(results[0].geometry.location);
- varmarker = newgoogle.maps.Marker({
- map: map,
- position: results[0].geometry.
- });
- }
- else{
- alert("Geocode was not successful for the following reason: " + status);
- }
- });
Geocoding C#
同