gmap

sailei1

浏览: 127653 次
性别:
来自: 北京

最近访客更多访客>>

Kanepan

橙稚--

olap4j

jave

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

画线！

js javascript google

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>画线</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
<script type="text/javascript"> 
 
  var poly;
  var map;
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
 

   var geocoder;
  function initialize() {
     geocoder = new google.maps.Geocoder();
    var centerPoint = new google.maps.LatLng(23.0999442125314, 113.203125);
    var myOptions = {
      zoom: 4,
      center: centerPoint,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
 
    var polyOptions = {
      strokeColor: 'red',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    poly = new google.maps.Polyline(polyOptions);
    poly.setMap(map);
	directionsDisplay = new google.maps.DirectionsRenderer();
	directionsDisplay.setMap(map);
	 var point = new google.maps.LatLng (37.37015718405753, 114.609375);
      addLatLng(point,'A点','理','2011-11-21');
	  
	   var point = new google.maps.LatLng (39.13006024213511, 115.48828125);
      addLatLng(point,'B点','宁','2012-01-01');
      
      var point = new google.maps.LatLng(23.241346102386135, 114.169921875);
      addLatLng(point,'广州','xx','2012-01-16');
	   //calcRoute('37.37015718405753, 114.609375','39.13006024213511, 115.48828125');
	   //calcRoute('39.13006024213511, 115.48828125','23.241346102386135, 114.169921875');
  }
  </script>
  
  <script type="text/javascript"> 
 
  function addLatLng(point,mytitle,myname,time) {
    var path = poly.getPath();
    path.push(point);
 
    var marker = new google.maps.Marker({
      position: point,
      title: mytitle,
      map: map
    });
	
	//查询地址
   // codeLatLng(point);
    geocoder.geocode({'latLng': point}, function(results, status) {
    	 if (status == google.maps.GeocoderStatus.OK) {
    	 	 if (results[1]) {
    	 	 	
    	 	 	 	var con='姓名： '+myname +'<br> 时间： '+time+' <br>所在地：'+ results[1].formatted_address;
	        attachSecretMessage(marker,con);
    	 	 	}
    	 	} else {

        alert("Geocoder failed due to: " + status);

      }
    	});

  }
 
 
 function attachSecretMessage(marker,mycontent) {
  var infowindow = new google.maps.InfoWindow(
      { content: mycontent,
        size: new google.maps.Size(50,50)
      });
	  
  google.maps.event.addListener(marker, 'click', function(response) {
    
	
	
    infowindow.open(map,marker);
	map.setCenter(marker.position);
	 map.setZoom(6);
  });
}
 
 //起点 终点
 function calcRoute(start,end) {
  
  var request = {
    origin:start, 
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
 
</script> 
</head> 
<body onload="initialize()">
  <div id="map_canvas"></div> 
</body> 
</html>

0
顶

0
踩

分享到：

EXT xtype | 追MM与设计模式的有趣见解 (经典转载)

2012-02-19 12:44
浏览 1393
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

gmap

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

gmap

评论

发表评论

相关推荐

Sencha Touch 2 Map

最近访客更多访客>>