使用谷歌地图api绘制路线

最新推荐文章于 2022-07-11 21:01:45 发布

__一缕阳光__

最新推荐文章于 2022-07-11 21:01:45 发布

阅读量4.2k

点赞数

文章标签：谷歌地图 api

本文链接：https://blog.csdn.net/zxr1521904712/article/details/50724135

版权

本程序实现在页面中使用google map api绘制一系列经纬度的线路

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google JavaScript API demo</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script>
    <script type="text/javascript">


    function initialize() {
    
	  
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        
        var blueIcon = new GIcon(G_DEFAULT_ICON); //新建一个图标
		//blueIcon.image = " http://www.mobanwang.com/icon/UploadFiles_8971/200805/20080521131500198.gif"; //定义图标地址
		blueIcon.image = "zzz.png"; //定义图标地址
		blueIcon.iconSize=new GSize(5, 5); //定义图标大小
  
  
	   markerOptions = { icon:blueIcon };// 设置 GMarkerOptions 对象
	   //map.disableDragging();   //禁止拖动
	   map.addControl(new GScaleControl());    //加入比例工具
	   map.addControl(new GSmallZoomControl()); //加入缩放工具
	   //map.openInfoWindow(map.getCenter(),"<h1>文字</h1>"); //地图载入时打开信息窗口
	   
	   point=new GLatLng(13.798586, 100.527736)   //经纬度
	   map.setCenter(point, 10);
	   
	   
	   

        LatLngStr = getLatLngStr();//从文件中读取经纬度。
        LatLng = getLatLng(LatLngStr);
        var polyline = new GPolyline(LatLng, "blue", 4,0.5);
        map.addOverlay(polyline); 
        for(var i = 0;i < LatLng.length;i++)
        {
        	if(i%100!=0)
        		continue;
        	point = LatLng[i];
        	var marker = new GMarker(point,markerOptions); //新建一个标记
	  		map.addOverlay(marker) //叠加一个层
        }   
        //alert("transfromLat "+transfromLat(179.995618));
        //alert("transfromLat "+transfromLat(1351.848909));
        //alert("transfromLat "+transfromLat(10034.188762));
        
	   }
    }
    var ForReading = 1;
    function getLatLngStr()
    {
    	var fso = new ActiveXObject("Scripting.FileSystemObject"); //在*.hta格式中有效
    	file = fso.OpenTextFile("Bangkok-NongKhai.csv",ForReading);//文件io
    	file.ReadLine();
    	var LatLng = [];
    	while(!file.atEndOfLine)
    	{
    		line = file.ReadLine();
    		strList = line.split(',');
    		lat = strList[2];
    		lat = transfromLat(lat);
    		lng = strList[3];
    		lng = transfromLng(lng);
    		str = lat+","+lng;
    		LatLng.push(str);
    	}
    	
    	file.Close();
    	return LatLng;
    	
    }
    function getLatLng(LatLngStr)
    {
    	var LatLng = [];
    	for(var i = 0;i < LatLngStr.length;i++)
    	{
    		strList = LatLngStr[i].split(',');
    		var lat = strList[0];
    		var lng = strList[1];
    		LatLng.push(new GLatLng(parseFloat(lat), parseFloat(lng)));
    	}
    	return LatLng;
    }
    //179.995618	1709.995618
/* 	function transfromLat(value) {
	   var str = value.split(".");		//179
	   var strlen = value.length;		
	   var str1 = parseInt(str[0].substring(0, 2));	//17
	   var str2 = parseFloat(value.substring(2, strlen));	//9.995618
	   var r = str1 + (str2 / 60);
	   return r;
	}

	function transfromLng(value) {
	   var str = value.split(".");
	   var strlen = value.length;
	   var str1 = parseInt(str[0].substring(0, 3));
	   var str2 = parseFloat(value.substring(3, strlen));
	   var r = str1 + (str2 / 60);
	   return r;
	} */
	function transfromLat(value) {//179.995618
		
       var v1 = Math.floor(value/100);
	   var v2 = (value - v1*100 )/60;		//179
	   return v1+v2;
	}

	function transfromLng(value) {//1101.9843
       var v1 = Math.floor(value/100);
	   var v2 = (value - v1*100 )/60;		//179
	   return v1+v2;
	}

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 1000px; height: 800px"></div>
  </body>
</html>

保存为*.hta格式

双击打开即可

__一缕阳光__

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用谷歌地图api绘制路线

本程序实现在页面中使用google map api绘制一系列经纬度的线路<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html xmlns="http://www.w3.org/1999/xhtml
复制链接

扫一扫