gmap

最新推荐文章于 2024-08-10 16:15:00 发布

sailei666

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量123

点赞数

分类专栏：画线！文章标签： js javascript google ViewUI

画线！专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<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>

sailei666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gmap

[code="js"] 画线 var poly; var map; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var geocoder; function initial...
复制链接

扫一扫

专栏目录