如何画线路图

js 基于高德地图在地图上画线路图

千次阅读 2019-01-17 09:39:55

效果图如下. 相关代码. <!DOCTYPE html> <html> <head> <title>demo</title> <meta charset="UTF-8"> &...

效果图如下. 



相关代码.

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
	<script src="https://webapi.amap.com/maps?v=1.3&key=key(自己设置)"></script>
    <script src="http://webapi.amap.com/ui/1.0/main.js"></script>
    <style type="text/css">
    	html,body,#container{
    		width:100%;
    		height:100%;
    		margin:0;
    		padding:0;
    	}
    	a, button, input {
		    -webkit-tap-highlight-color: rgba(0,0,0,0);
		}
		.cl:after,.clearfix:after{
			content:".";
			display:block;
			height:0;
			clear:both;
			visibility:hidden
		}
		.cl,.clearfix{
			zoom:1
		}
    	.button-group {
		    position: absolute;
		    bottom: 36px;
		    font-size: 12px;
		    right: 30px;
		}
		.button-group .button {
		    background-color: #0D9BF2;
		    color: #FFF;
		    border: 0;
		    outline: none;
		    border-radius: 3px;
		    padding: 5px;
		    margin-bottom: 4px;
		    cursor: pointer;
		    text-align: center;
		    font-size: 14px;
		    margin-right: 6px;
		    float: right;
		}
		.addnewline, .restartline {
		    position: relative;
		    float: right;
		}
		.line-color-group {
		    position: absolute;
		    bottom: 21px;
    		left: -40px;
		}
		.line-color-group input:nth-of-type(1) {
		    background: #ddab89;
		}
		.line-color-group input:nth-of-type(2) {
		    background: #274e13;
		}
		.addnewline input, .restartline input {
		    background-color: #0D9BF2;
		    color: #FFF;
		    border: 0;
		    outline: none;
		    padding: 5px;
		    width: 78px;
		    cursor: pointer;
		    text-align: center;
		    font-size: 14px;
		}
    </style>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
		// 初始数据
		var electricLines = [
			{
				"type":1,
				"polylinePathArray":[
					{"O":39.95593567222839,"M":116.39812341237257,"lng":116.398123,"lat":39.955936},
					{"O":39.95575885456828,"M":116.39814487004469,"lng":116.398145,"lat":39.955759},
					{"O":39.95575885456828,"M":116.39814487004469,"lng":116.398145,"lat":39.955759},
					{"O":39.95579997499513,"M":116.39824142956923,"lng":116.398241,"lat":39.9558}
				]
			},
			{
				"type":0,
				"polylinePathArray":[
					{"O":39.95579997499513,"M":116.39824142956923,"lng":116.398241,"lat":39.9558},
					{"O":39.95579997499513,"M":116.39836481118391,"lng":116.398365,"lat":39.9558},
					{"O":39.95579997499513,"M":116.39836481118391,"lng":116.398365,"lat":39.9558},
					{"O":39.9558246472394,"M":116.3985418369789,"lng":116.398542,"lat":39.955825}
				]
			},
			{
				"type":2,
				"polylinePathArray":[
					{"O":39.9558246472394,"M":116.3985418369789,"lng":116.398542,"lat":39.955825},
					{"O":39.95563138108786,"M":116.3985418369789,"lng":116.398542,"lat":39.955631},
					{"O":39.95563138108786,"M":116.3985418369789,"lng":116.398542,"lat":39.955631},
					{"O":39.95553680383595,"M":116.39853647256086,"lng":116.398536,"lat":39.955537}
				]
			},
			{
				"type":0,
				"polylinePathArray":[
					{"O":39.909184736742915,"M":116.3974762797622,"lng":116.397476,"lat":39.909185},
					{"O":39.90919296642823,"M":116.39774986508172,"lng":116.39775,"lat":39.909193},
					{"O":39.90919296642823,"M":116.39774986508172,"lng":116.39775,"lat":39.909193},
					{"O":39.90906540619449,"M":116.39775522949975,"lng":116.397755,"lat":39.909065}
				]
			},
			{
				"type":1,
				"polylinePathArray":[
				{"O":39.90906540619449,"M":116.39775522949975,"lng":116.397755,"lat":39.909065},
				{"O":39.90906540619449,"M":116.39827021363061,"lng":116.39827,"lat":39.909065}
				]
			},
			{
				"type":2,
				"polylinePathArray":[
				{"O":39.90906540619449,"M":116.39827021363061,"lng":116.39827,"lat":39.909065},
				{"O":39.90940693789983,"M":116.39827557804864,"lng":116.398276,"lat":39.909407}
				]
			}
		];

		var infoWindow;
		var selectedmark;

		var map = new AMap.Map('container', {
	        resizeEnable: true,
	        zoom:20,
	        center: [116.397428, 39.90923]
	 	});


	 	marker = new AMap.Marker({
	        map: map,
	        content: '',
	        position: [116.397428, 39.90923],
	        zIndex: 101,
	        size: new AMap.Size(20,20),
	        offset: new AMap.Pixel(0,-20),
	        extData:{
	        	'id':'1234567'
	        }
	    });
	    
	    marker.on('click',markerClick);

	    function markerClick(e){
	    	selectedmark = e.target;
		    var extData = e.target.getExtData();
		    console.log(extData);
		    stationInfo = extData;
		    var info = [];
		    info.push('<div onclick="showPolyline(this)" id="'+stationInfo.id+'">显示线路图</div>');
		    infoWindow = new AMap.InfoWindow({
	            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
	        });
		    infoWindow.open(map, e.target.getPosition());
	    }

		// 显示供电线路图
		var linemarker = null;
		function showPolyline(obj){
		    infoWindow.close();
		    if(linemarker){
		        map.remove(linemarker);
		    }
		    $('.button-group').remove();
		    $('#container').append('<div class="button-group">' +
		        '<input type="button" class="button stopbtn" data-id="'+$(obj).attr('id')+'" value="提交绘制" onclick="stop(this)" style="display: none;">' +
		        '<input type="button" class="button finishsomebtn" data-id="'+$(obj).attr('id')+'" value="本段完成" onclick="finishsome(this)" style="display: none;">' +
		        '<div class="addnewline clearfix" style="display: none;">' +
		            '<input type="button" class="button showlinegroupbtn" data-id="'+$(obj).attr('id')+'" value="新增线路图" onclick="showlinegroup(this)">' +
		            '<ul class="line-color-group" style="display:none;">' +
		                '<input type="button" class="botton" data-id="'+ $(obj).attr('id') +'" value="深埋线路" onclick="start(this,1,0)">'+
		                '<input type="button" class="botton" data-id="'+ $(obj).attr('id') +'" value="普通线路" onclick="start(this,1,1)">'+
		                '<input type="button" class="botton" data-id="'+ $(obj).attr('id') +'" value="架空线路" onclick="start(this,1,2)">'+
		            '</ul>'+
		        '</div>' +
		        '<input type="button" class="button" data-id="'+$(obj).attr('id')+'" value="重画线路图" onclick="removelinegroup(this)">'+
		        '<input type="button" class="button StartdrawingBTN" data-id="'+$(obj).attr('id')+'" value="开始绘制" onclick="Startdrawing(this)">'+
		        '</div>');
		    	

		        map.off('movestart',lineMove);
		        if(electricLines == '' || electricLines == '[]'){
		            alert('暂无供电线路图');
		        }else{
		            allpolylinePathArray = electricLines;
		            console.log(allpolylinePathArray);
		            for(var i in allpolylinePathArray){
		                if( allpolylinePathArray[i].type === 0 ){
		                    polylineOriginal = new AMap.Polyline({map: map, strokeColor:'#ddab89'});  // 深埋
		                }else if( allpolylinePathArray[i].type === 1 ){
		                    polylineOriginal = new AMap.Polyline({map: map, strokeColor:'#274e13'});  // 普通
		                } else {
		                    polylineOriginal = new AMap.Polyline({map: map, strokeColor:'#3c78d8'});  //架空
		                }
		                polylineOriginal.setPath(allpolylinePathArray[i].polylinePathArray);
		                polylineOriginalOBJ.push(polylineOriginal);
		            }
		        }
		    
		}
		// 开始绘制线路图按钮
		function Startdrawing(obj){
		    $('.StartdrawingBTN').hide();
		    $('.addnewline').show();
		    // 显示地图中心点
		    var label = {
		        offset: new AMap.Pixel(20,6), //修改label相对于marker的位置
		        content: '移动地图将该图标作为起始位置，开始绘制线路图'
		    };
		    linemarker = new AMap.Marker({
		        map: map,
		        draggable:false,
		        position: map.getCenter(),
		        zIndex: 150,
		        size: new AMap.Size(40, 40),
		        offset: new AMap.Pixel(-10,-34),
		        //使用所属基站的扩展信息
		        extData:'',
		        label:label
		    });
		    map.on('moveend',centermovefn = function(){
		        linemarker.setPosition(map.getCenter());
		    })
		}
		function showlinegroup(obj){
		    $('.line-color-group').hide();
		    $(obj).siblings('.line-color-group').show();
		}
		// 重画线路图 移除所有的线路图
		function removelinegroup(){
		    console.log('删除所有的折线图');
		    $('.addnewline').show();
		    polylinePathArray = [];
		    allpolylinePathArray = [];
		    for(var i in polylinenewaddOBJ){
		        polylinenewaddOBJ[i].hide();
		    }
		    for(var j in polylineOriginalOBJ){
		        polylineOriginalOBJ[j].hide();
		    }
		    positionPicker.stop();
		    map.off('movestart',lineMove);
		    alert('已清空该基站线路图，请点击新增开始绘制');
		    // 显示地图中心点
		    Startdrawing();
		    map.on('moveend',centermovefn = function(){
		        linemarker.setPosition(map.getCenter());
		    })

		}

		// 在地图上绘制线路图

		/** ******************** 划线 ******************** */
		    // 折现节点数组
		var polylinePathArray = [];  //PositionPicker 中使用
		var allpolylinePathArray = []; // 所有折现图
		var polylineOriginal,polylineOriginalOBJ=[];
		var polylinenewadd,polylinenewaddOBJ=[];
		var stationInfo; // 基站信息，在点击基站的时候获取
		var lineMove;  // 开始划线的监听函数
		var linetype; // 折线的类型


		/** ******************** 加载 PositionPicker ******************** */
		//加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
		AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
		    window.positionPicker = new PositionPicker({
		        mode: 'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
		        map: map//依赖地图对象
		    });

		    positionPicker.on('success', function (positionResult) {
		        //console.log('success:获取到新位置');
		        // 将新的节点添加到节点数组中,开始画线
		        polylinePathArray.push(positionResult.position);
		        polyline.setPath(polylinePathArray);
		    });

		    positionPicker.on('fail', function (positionResult) {
		    	console.log(positionResult);
		        console.log('fail:海上或海外无法获得地址信息')
		    });

		});


		//开始画线路图
		function start(obj,category,type) {  // category 0,重绘  1,新增   type 0,深埋 1,普通 2 架空
		    $('.finishsomebtn').show();
		    // 开始画新的时候线路图的时候暂时隐藏掉提交按钮，防止误操作没有提交新增线路
		    $(".stopbtn").hide();
		    // 开始画图的时候隐藏新增线路按钮，只能点击本段完成之后再画不同颜色的线路图
		    $(".addnewline").hide();
		    //隐藏掉地图中心点位置，并且取消掉地图移动时修改地图中心点的监听事件
		    map.remove(linemarker);
		    map.off('moveend',centermovefn);
		    $('.line-color-group').hide();
		    linetype = type;
		    console.log(allpolylinePathArray);
		    polylinePathArray = [];
		    polyline = null;
		    if( type === 0 ){
		        polyline = new AMap.Polyline({map: map, strokeColor:'#ddab89'});  // 深埋
		    }else if( type === 1 ){
		        polyline = new AMap.Polyline({map: map, strokeColor:'#274e13'});  // 普通
		    } else {
		        polyline = new AMap.Polyline({map: map, strokeColor:'#3c78d8'});  //架空
		    }
		    polylinenewaddOBJ.push(polyline);
		    map.on('movestart',lineMove = function(e) {
		        // 使用一个位置开始画线路图
		        positionPicker.start(map.getCenter());
		    });

		}

		// 本段完成
		function finishsome(obj){
		    $(obj).hide();
		    // 点击本段完成的时候显示提交按钮
		    $(".stopbtn").show();
		    // 显示新增按钮
		    $(".addnewline").show();
		    map.off('movestart',lineMove);
		    var polylineOBJ = {};
		    polylineOBJ.type = linetype;
		    console.log(polylineOBJ);
		    if(polylinePathArray.length > 0){
		        polylineOBJ.polylinePathArray = polylinePathArray;
		        console.log('push进去了',polylinePathArray);
		        allpolylinePathArray.push(polylineOBJ);
		        polylinenewaddOBJ.push(polyline);
		    }
		    alert('操作成功，请进行继续添加或者提交线路图')
		}

		// 绘图结束
		function stop(obj) {
		    console.log('示例结束,获取到线路图节点:');
		    positionPicker.stop();
		    map.off('movestart',lineMove);
		    // 移除地图中心点marker
		    var data = {
		        id : $(obj).attr('data-id'),
		        electricLines:JSON.stringify(allpolylinePathArray)
		    };
		    console.log(data)
            alert('提交成功');
            $('.button-group').remove();
            for(var i in polylinenewaddOBJ){
                polylinenewaddOBJ[i].hide();
            }
            for(var i in polylineOriginalOBJ){
                polylineOriginalOBJ[i].hide();
            }
	        
		    /*$.ajax({
		        url: '',
		        type: "",
		        data: data,
		        async:true,
		        success: function(d) {
		            console.log(d);
		            var res = JSON.parse(d);
		            if(res.status == "OK"){
		                alert('提交成功');
		                $('.button-group').remove();
		                for(var i in polylinenewaddOBJ){
		                    polylinenewaddOBJ[i].hide();
		                }
		                for(var i in polylineOriginalOBJ){
		                    polylineOriginalOBJ[i].hide();
		                }
		            }
		        },
		        error: function(d) {
		            console.log(d);
		        }
		    })*/
		}
</script>
</body>
</html>

收起

展开全文

使用Google Earth画线路图

千次阅读 2017-01-06 11:10:14

1.首先需要将GPS Debug.log打开。打开方法：点我传送。 2.使用 NMEA2KMZ 程序将LOG 中的Nmealog开头的log转换成 KMZ文件，会生成一个日期的文件。 3.直接将生成的文件放到Google Earth中就行了。...

1.首先需要将GPS Debug.log打开。打开方法：点我传送。

2.使用 NMEA2KMZ 程序将LOG 中的Nmealog开头的log转换成 KMZ文件，会生成一个日期的文件。

3.直接将生成的文件放到Google Earth中就行了。当两条路线对比的时候，还可以调整路线的颜色。

注： KMZ文件是将GPS每秒位置点连成轨迹，比较精确的反映了测试轨迹。

资源下载：点我传送

收起

展开全文

怎么样能画出铁路的线路图
2014-11-03 15:00:58
小弟想画个铁路线路图！输入某个特定车次就能显示出该车次所经过的所有站点该用什么编译呢！小弟在此谢过各路大神了！
收起
程序设计

android GoogleMap画导航线路图路径规划

千次阅读 2017-11-06 20:27:15

最近一个项目要给老外用，用的googlemap，做一些小demo： Google Mapandroid版和IOS版的SDK都没有集成路径规划的相关API，若要实现，只能通过http链接请求URL，携带起点终点经纬度，得到返回集合，在地图中... ...

最近一个项目要给老外用，用的googlemap，做一些小demo：


Google Mapandroid版和IOS版的SDK都没有集成路径规划的相关API，若要实现，只能通过http链接请求URL，携带起点终点经纬度，得到返回集合，在地图中展示。

 Google Directions API ：https://developers.google.com/maps/documentation/directions/#Waypoints


 Directions Service：https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests
举个例子，请求地址如下：



https://maps.googleapis.com/maps/api/directions/json?origin=39.99709957757345,116.31184045225382&destination=39.949158391497214,116.4154639095068&sensor=false&mode=driving

origin=起点经纬度 destination=终点经纬度 




代码如下：


public class EActivity extends AppCompatActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    MapFragment mapFragment;
    String mapurl;

    Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            String s1 = (String) msg.obj;
            JSONObject jObject;
            List<List<HashMap<String, String>>> routes = null;

            try {
                jObject = new JSONObject(s1);
                DirectionsJSONParser parser = new DirectionsJSONParser();

                // Starts parsing data
                routes = parser.parse(jObject);
                System.out.println("do in background:" + routes);
            } catch (Exception e) {
                e.printStackTrace();
            }
            ArrayList<LatLng> points = null;
            PolylineOptions lineOptions = null;
            MarkerOptions markerOptions = new MarkerOptions();

            // Traversing through all the routes
            for (int i = 0; i < routes.size(); i++) {
                points = new ArrayList<LatLng>();
                lineOptions = new PolylineOptions();

                // Fetching i-th route
                List<HashMap<String, String>> path = routes.get(i);

                // Fetching all the points in i-th route
                for (int j = 0; j < path.size(); j++) {
                    HashMap<String, String> point = path.get(j);

                    double lat = Double.parseDouble(point.get("lat"));
                    double lng = Double.parseDouble(point.get("lng"));
                    LatLng position = new LatLng(lat, lng);

                    points.add(position);
                }

                // Adding all the points in the route to LineOptions
                lineOptions.addAll(points);
                lineOptions.width(20);

                // Changing the color polyline according to the mode
                lineOptions.color(Color.YELLOW);
            }

            // Drawing polyline in the Google Map for the i-th route
            mMap.addPolyline(lineOptions);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.e);
        GoogleMapOptions googleMapOptions = new GoogleMapOptions();
        mapFragment = MapFragment.newInstance(googleMapOptions);
        FragmentTransaction fragmentTransaction =
                getFragmentManager().beginTransaction();
        fragmentTransaction.add(R.id.map, mapFragment);
        fragmentTransaction.commit();
        mapFragment.getMapAsync(this);
        mapurl = getDirectionsUrl(new LatLng(39.99709957757345, 116.31184045225382), new LatLng(39.949158391497214, 116.4154639095068));

    }

    private void request() {
        OkHttpClient okHttpClient = new OkHttpClient();
        Request request = new Request.Builder().url(mapurl).get().build();
        okHttpClient.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {

            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String s1 = response.body().string();
                Message message = new Message();
                message.obj = s1;
                mHandler.sendMessage(message);


            }
        });
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        LatLng sydney = new LatLng(39.99709957757345, 116.31184045225382);
        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 12));
        mMap.addCircle(new CircleOptions()
                .center(sydney)
                .radius(1000)
                .strokeWidth(5)
                .strokeColor(Color.RED)
                .fillColor(Color.BLACK)
        );
        mMap.addCircle(new CircleOptions()
                .center(new LatLng(39.949158391497214,116.4154639095068))
                .radius(1000)
                .strokeWidth(5)
                .strokeColor(Color.RED)
                .fillColor(Color.TRANSPARENT)
        );

        request();
    }

    private String getDirectionsUrl(LatLng origin, LatLng dest) {

        // Origin of route
        String str_origin = "origin=" + origin.latitude + ","
                + origin.longitude;

        // Destination of route
        String str_dest = "destination=" + dest.latitude + "," + dest.longitude;

        // Sensor enabled
        String sensor = "sensor=false";

        // Travelling Mode
        String mode = "mode=driving";

        //waypoints,116.32885,40.036675
        String waypointLatLng = "waypoints=" + "40.036675" + "," + "116.32885";

        // Building the parameters to the web service
        String parameters = str_origin + "&" + str_dest + "&" + sensor + "&"
                + mode + "&" + waypointLatLng;

        // Output format
        String output = "json";

        // Building the url to the web service
        String url = "https://maps.googleapis.com/maps/api/directions/"
                + output + "?" + parameters;
        System.out.println("getDerectionsURL--->: " + url);
        return url;
    }

    public class DirectionsJSONParser {
        public List<List<HashMap<String, String>>> parse(JSONObject jObject) {

            List<List<HashMap<String, String>>> routes = new ArrayList<List<HashMap<String, String>>>();
            JSONArray jRoutes = null;
            JSONArray jLegs = null;
            JSONArray jSteps = null;

            try {

                jRoutes = jObject.getJSONArray("routes");

                /** Traversing all routes */
                for (int i = 0; i < jRoutes.length(); i++) {
                    jLegs = ((JSONObject) jRoutes.get(i)).getJSONArray("legs");
                    List path = new ArrayList<HashMap<String, String>>();

                    /** Traversing all legs */
                    for (int j = 0; j < jLegs.length(); j++) {
                        jSteps = ((JSONObject) jLegs.get(j)).getJSONArray("steps");

                        /** Traversing all steps */
                        for (int k = 0; k < jSteps.length(); k++) {
                            String polyline = "";
                            polyline = (String) ((JSONObject) ((JSONObject) jSteps
                                    .get(k)).get("polyline")).get("points");
                            List<LatLng> list = decodePoly(polyline);

                            /** Traversing all points */
                            for (int l = 0; l < list.size(); l++) {
                                HashMap<String, String> hm = new HashMap<String, String>();
                                hm.put("lat",
                                        Double.toString(((LatLng) list.get(l)).latitude));
                                hm.put("lng",
                                        Double.toString(((LatLng) list.get(l)).longitude));
                                path.add(hm);
                            }
                        }
                        routes.add(path);
                    }
                }
            } catch (JSONException e) {
                e.printStackTrace();
            } catch (Exception e) {
            }
            return routes;
        }

        private List<LatLng> decodePoly(String encoded) {

            List<LatLng> poly = new ArrayList<LatLng>();
            int index = 0, len = encoded.length();
            int lat = 0, lng = 0;

            while (index < len) {
                int b, shift = 0, result = 0;
                do {
                    b = encoded.charAt(index++) - 63;
                    result |= (b & 0x1f) << shift;
                    shift += 5;
                } while (b >= 0x20);
                int dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
                lat += dlat;

                shift = 0;
                result = 0;
                do {
                    b = encoded.charAt(index++) - 63;
                    result |= (b & 0x1f) << shift;
                    shift += 5;
                } while (b >= 0x20);
                int dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
                lng += dlng;

                LatLng p = new LatLng((((double) lat / 1E5)),
                        (((double) lng / 1E5)));
                poly.add(p);
            }
            return poly;
        }
    }
}

收起

展开全文

android创建googlemap基础教程和画导航线路图

万次阅读 2013-08-16 19:45:24

...链接里是官方给出的向导...二、添加导航线路图（路径规划） 1，把经纬度组合成向google请求的URL 【注意：本文请求的url是以xml形式为返回结果，如果想实现返回json结果，请移步我之前的一篇文章 ...







GoogleMap android  API v2：https://developers.google.com/maps/documentation/android/start?hl=zh-CN
链接里是官方给出的向导，我只是照着模拟做了一遍，希望E文不好的同学可以通过本文获取一些地图开发知识，同时记录自己的心得，仅此而已。


一、添加GoogleMap
1，创建一个新的Project，在project.properties里添加googlePlayServices服务：




2，google play service lib在 android自带SDK下就有，这个我就不再赘述了，相当于添加一个第三方的lib库，有关此知识请网络搜索。
3，activityMain.xml里添加 GoogleMap 组件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="14dp"
        android:text="路径规划" />

    <fragment
        android:id="@+id/mgooglemap"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button1" >
    </fragment>

</RelativeLayout>

4，MainActivity.java中：
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		mGoogleMap = ((MapFragment) getFragmentManager().findFragmentById(
				R.id.mgooglemap)).getMap();

		routeBtn = (Button) findViewById(R.id.button1);
		routeBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				LatLng start = new LatLng(40.036675, 116.32885);
				LatLng end = new LatLng(40.056675, 116.38885);
				String url = getDirectionsUrl(start, end);
				googleMapRouteTask task = new googleMapRouteTask(url);
				task.execute();

			}
		});

	}

5，配置文件中添加permission
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!--
     The following two permissions are not required to use
     Google Maps Android API v2, but are recommended.
    -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 
6，这一步最重要，在配置文件添加Googl Map Key，现在地图开发都需要申请相应的key，googleMap比较麻烦，除了申请好key，还要上传MD5校验码生成一个专用的keystore，debug时有debug专用的key 和 keystore；release（发布）时需要使用release 的key 和keystore。
所以看到这里时，你一定是申请好了debug 和release的两个key，并且验证好了各自专用的keystroe，如果没有请点击本文开头的链接，阅读一下如何申请key和keystore。（如果是多人开发，已有他人申请并创建了google map，请找他索要 key 和keystore，自己替换之）

7，以上都搞定的话，就运行吧，如果mapviw显示一片空白，则看log把，肯定是google Map服务验证出错了，查看自己的key和keystore






二、添加导航线路图（路径规划）
1，把经纬度组合成向google请求的URL
【注意：本文请求的url是以xml形式为返回结果，如果想实现返回json结果，请移步我之前的一篇文章
http://blog.csdn.net/mad1989/article/details/9734667】

	/**
	 * 组合成googlemap direction所需要的url
	 * 
	 * @param origin
	 * @param dest
	 * @return url
	 */
	private String getDirectionsUrl(LatLng origin, LatLng dest) {
		// Origin of route
		String str_origin = "origin=" + origin.latitude + ","
				+ origin.longitude;

		// Destination of route
		String str_dest = "destination=" + dest.latitude + "," + dest.longitude;

		// Sensor enabled
		String sensor = "sensor=false";

		// Travelling Mode
		String mode = "mode=driving";

		// String waypointLatLng = "waypoints="+"40.036675"+","+"116.32885";

		// 如果使用途径点，需要添加此字段
		// String waypoints = "waypoints=";

		String parameters = null;
		// Building the parameters to the web service

		parameters = str_origin + "&" + str_dest + "&" + sensor + "&" + mode;
		// parameters = str_origin + "&" + str_dest + "&" + sensor + "&"
		// + mode+"&"+waypoints;

		// Output format
		// String output = "json";
		String output = "xml";

		// Building the url to the web service
		String url = "https://maps.googleapis.com/maps/api/directions/"
				+ output + "?" + parameters;
		System.out.println("getDerectionsURL--->: " + url);
		return url;
	}

2，自定义AsynTask类，异步请求，实现导航。
	/**
	 * 自定义class通过AsyncTask机制异步请求获取导航数据
	 * 
	 * @author Administrator
	 * 
	 */
	private class googleMapRouteTask extends
			AsyncTask<String, Void, List<LatLng>> {

		HttpClient client;
		String url;

		List<LatLng> routes = null;

		public googleMapRouteTask(String url) {
			this.url = url;
		}

		@Override
		protected List<LatLng> doInBackground(String... params) {

			HttpGet get = new HttpGet(url);

			try {
				HttpResponse response = client.execute(get);
				int statusecode = response.getStatusLine().getStatusCode();
				System.out.println("response:" + response + "      statuscode:"
						+ statusecode);
				if (statusecode == 200) {

					String responseString = EntityUtils.toString(response
							.getEntity());

					int status = responseString.indexOf("<status>OK</status>");
					System.out.println("status:" + status);
					if (-1 != status) {
						int pos = responseString.indexOf("<overview_polyline>");
						pos = responseString.indexOf("<points>", pos + 1);
						int pos2 = responseString.indexOf("</points>", pos);
						responseString = responseString
								.substring(pos + 8, pos2);
						routes = decodePoly(responseString);
					} else {
						// 错误代码，
						return null;
					}

				} else {
					// 请求失败
					return null;
				}

			} catch (ClientProtocolException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
			System.out.println("doInBackground:"+routes);
			return routes;
		}

		@Override
		protected void onPreExecute() {
			client = new DefaultHttpClient();
			client.getParams().setParameter(
					CoreConnectionPNames.CONNECTION_TIMEOUT, 15000);
			client.getParams().setParameter(CoreConnectionPNames.SO_TIMEOUT,
					15000);
			super.onPreExecute();
		}

		@Override
		protected void onPostExecute(List<LatLng> routes) {
			super.onPostExecute(routes);
			if (routes == null) {
				// 导航失败
				Toast.makeText(getApplicationContext(), "没有搜索到线路", Toast.LENGTH_LONG).show();
			}
			else{
				
				//地图描点
				PolylineOptions lineOptions = new PolylineOptions();
				lineOptions.addAll(routes);
				lineOptions.width(3);
				lineOptions.color(Color.BLUE);
				mGoogleMap.addPolyline(lineOptions);
				//定位到第0点经纬度
				mGoogleMap.animateCamera(CameraUpdateFactory.newLatLng(routes.get(0)));
			}

		}

	}

3，返回的xml数据，google的points数据使用了其它格式的编码，需要我们解析出来。
	/**
	 * 解析返回xml中overview_polyline的路线编码
	 * 
	 * @param encoded
	 * @return List<LatLng>
	 */
	private List<LatLng> decodePoly(String encoded) {
		List<LatLng> poly = new ArrayList<LatLng>();
		int index = 0, len = encoded.length();
		int lat = 0, lng = 0;
		while (index < len) {
			int b, shift = 0, result = 0;
			do {
				b = encoded.charAt(index++) - 63;
				result |= (b & 0x1f) << shift;
				shift += 5;
			} while (b >= 0x20);
			int dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
			lat += dlat;
			shift = 0;
			result = 0;
			do {
				b = encoded.charAt(index++) - 63;
				result |= (b & 0x1f) << shift;
				shift += 5;
			} while (b >= 0x20);
			int dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
			lng += dlng;
			LatLng p = new LatLng((((double) lat / 1E5)),
					(((double) lng / 1E5)));
			poly.add(p);
		}
		return poly;
	}

4，本文开头，创建GoogleMap第四步已经在onCreate（）里添加了按钮监听事件，传递了两个经纬度，请求导航线路，有时候会 timeout，不过没关系，多试几次，看一下我的log日志：


5，这么多数据，我知道你已经迫不及待想看一看效果图了：


（图中红色的线便是导航处的结果所描的点）


三、额外知识（ HttpURLConnection和httpclient）
----------------------------------------------------------------------以下只是记录URLConnection和HttpClient的使用，跟googleMap没有关系--------------------------------------------------------------
1，代码
使用HttpClient已经在第二部分googleMapRouteTask 中体现出来了，接下来我把HttpURLConnection的用法也记录下来，还是以本文路径规划的代码为例：
	public String routeWithHttpURLConnection() {

		LatLng start = new LatLng(40.036675, 116.32885);
		LatLng end = new LatLng(40.056675, 116.38885);
		String url = getDirectionsUrl(start, end);

		// 保存请求结果
		String result = "";
		try {
			URL requestUrl = new URL(url);

			// 此处的urlConnection对象实际上是根据URL的,请求协议(此处是http)生成的
			// URLConnection类,的子类HttpURLConnection,故此处最好将其转化
			// 为HttpURLConnection类型的对象,以便用到HttpURLConnection更多的API.如下:
			HttpURLConnection connection = (HttpURLConnection) requestUrl
					.openConnection();
			// ***********************************************************************//
			// 设定传送的内容类型是可序列化的java对象
			// (如果不设此项,在传送序列化对象时,当WEB服务默认的不是这种类型时可能抛java.io.EOFException)
			connection.setRequestProperty("Content-type",
					"application/x-java-serialized-object");

			//设置超时时间
			connection.setConnectTimeout(3000);
			
			// 设定请求的方法为"POST"，默认是GET
			connection.setRequestMethod("POST");
			
			// Post 请求不能使用缓存
			connection.setUseCaches(false);
			// ***********************************************************************//
			connection.connect();
			// 调用HttpURLConnection连接对象的getInputStream()函数,
			// 将内存缓冲区中封装好的完整的HTTP请求电文发送到服务端。
			InputStream is = connection.getInputStream();// <===注意，实际发送请求的代码段就在这里

			BufferedReader br = new BufferedReader(new InputStreamReader(is));

			StringBuffer buffer = new StringBuffer();
			String line = null;
			if ((line = br.readLine()) != null) {
				buffer.append(line);
			}
			result = buffer.toString();
			br.close();
			is.close();
			connection.disconnect();

		} catch (IOException e) {
			e.printStackTrace();
		}

		return result;

	}
2，效果
和使用HttpClient一样，同样都会得到数据，知识HttpURLConnection是java原生自带的，通过Input(out)Stream获取数据，使用起来比较麻烦，而Apache已经把它们都封装在了HttpClient中，使用responese.getEntity()便能得到数据，无需自己写各种流了。
3，总结

a:) HttpURLConnection的connect()函数，实际上只是建立了一个与服务器的tcp连接，并没有实际发送http请求。 无论是post还是get，http请求实际上直到HttpURLConnection的getInputStream()这个函数里面才正式发送出去。 

       b:) 在用POST方式发送URL请求时，URL请求参数的设定顺序是重中之重，对connection对象的一切配置（那一堆set函数） 都必须要在connect()函数执行之前完成。而对outputStream的写操作，又必须要在inputStream的读操作之前。 这些顺序实际上是由http请求的格式决定的。 

    如果inputStream读操作在outputStream的写操作之前，会抛出例外： java.net.ProtocolException: Cannot write output after reading input....... 

       c:) http请求实际上由两部分组成， 一个是http头，所有关于此次http请求的配置都在http头里面定义， 一个是正文content。connect()函数会根据HttpURLConnection对象的配置值生成http头部信息，因此在调用connect函数之前，就必须把所有的配置准备好。 

       d:) 在http头后面紧跟着的是http请求的正文，正文的内容是通过outputStream流写入的， 实际上outputStream不是一个网络流，充其量是个字符串流，往里面写入的东西不会立即发送到网络， 而是存在于内存缓冲区中，待outputStream流关闭时，根据输入的内容生成http正文。 至此，http请求的东西已经全部准备就绪。在getInputStream()函数调用的时候，就会把准备好的http请求正式发送到服务器了，然后返回一个输入流，用于读取服务器对于此次http请求的返回信息。由于http请求在getInputStream的时候已经发送出去了（包括http头和正文），因此在getInputStream()函数 之后对connection对象进行设置（对http头的信息进行修改）或者写入outputStream（对正文进行修改） 都是没有意义的了，执行这些操作会导致异常的发生。

收起

展开全文

HttpClient

百度地图基本使用及画线路轨迹播放问题
千次阅读 2017-04-24 18:05:34
最近项目中用到了百度地图，以前用过的有点老了，最近百度地图改版了，所以这里记录一下遇到的问题。...1、配置百度地图进行经纬度的定位和画折线图轨迹以及百度地图控件和ScrollView滑动冲突的问题解决。 2、在地
收起
百度地图定位
安卓百度地图基本配置及画线路轨迹问题
万次阅读 热门讨论 2016-06-27 13:46:42
配置百度地图进行经纬度的定位和画折线图轨迹以及百度地图控件和ScrollView滑动冲突的问题解决。首先按照百度地图的API把jar包还有主配置文件还有百度key这些基本配置都给加上，确保key值是正确的。解决百度地图...
收起
android 百度地图Marker
android和ios GoogleMap画导航线路图路径规划（Directions）
千次阅读 2017-11-07 13:08:50
本文适合【Android iOS】下的google地图开发转自：HTTP：//blog.csdn .NET / mad1989 /条/信息/ 9734667 1.0 GoogleMap路径规划 Google Mapandroid版和IOS版的SDK都没有集成路径规划的相关API，若...
收起
android和ios GoogleMap画导航线路图 路径规划（Directions）
千次阅读 2017-01-04 14:13:21
本文适合【Android iOS】下的google Map 开发转自：http://blog.csdn.NET/mad1989/article/details/9734667 1.0 GoogleMap路径规划 Google Mapandroid版和IOS版的SDK都没有集成路径规划的相关API，若要...
收起
echarts 路线图实例 线路图 及线路图特效
千次阅读 2017-11-16 16:15:00
如图：连接:https://files.cnblogs.com/files/vali/%E9%83%91%E5%B7%9E%E5%85%AC%E4%BA%A4%E7%BA%BF%E8%B7%AF%E5%9B%BE.rar 转载于:https://www.cnblogs.com/vali/p/7844906.html
收起
用python画星空-【Python】手把手教你绘制星空旅游线路图
千次阅读 2020-10-29 20:26:09
其实类似这样的航线图我以前也用PPT绘制过，给领导用于发朋友圈，虽然总体能表达出意思，但是效果不能让自己满意，见下图。最近趁着研究python的数据可视化，顺便绘制了这张更显炫酷一些的星空主题航线图。接下来我...
收起
如何在地图上画线路 iphone开发
千次阅读 2011-11-03 11:11:12
效果图如下：可能有偏移，这里不进行解决。用到的几个方法代码如下：使用google 地图 api 3.0协议解析两个经纬度，得到行进路线。比较重要的一个方法： } 这个是基本的...
收起
iphone google api
iOS开发学习线路图
2016-05-14 23:18:55
iOS开发学习线路图
收起
iOS开发
Android 地铁线路图如何实现
2016-04-28 00:07:13
这种的地铁线路图在Android上如何实现。![图片说明](https://img-ask.csdn.net/upload/201604/28/1461802000_792260.png)
收起
android
web 前端学习线路图
千次阅读 多人点赞 2018-09-19 19:31:08
web 前端学习线路图 一、HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用元素 HTML计算机代码元素 HTML注释 ...
收起
web前端
用python画星空的代码简单-【Python】手把手教你绘制星空旅游线路图
2020-11-11 14:13:49
其实类似这样的航线图我以前也用PPT绘制过，给领导用于发朋友圈，虽然总体能表达出意思，但是效果不能让自己满意，见下图。最近趁着研究python的数据可视化，顺便绘制了这张更显炫酷一些的星空主题航线图。接下来我...
收起
基于百度地图画出物流起始线路
千次阅读 2019-06-09 19:50:56
相信很多小伙伴在做商城项目物流模块时会用到需要在地图上显示物流信息的功能，那么我们如何基于百度地图来展示客户的物流信息的功能呢...这样你就可以实现基于百度地图画线物流起始线路的功能了，是不是很简单呢。
收起
Plotly绘制成都地铁全线路图（线路可实时更新最新线路 + 完整代码）
千次阅读 2020-11-30 20:08:02
最近做一个地图可视化的项目需要在地图上画出成都已开通的地铁线路图，中间还是踩了几个小坑，记录一下整个过程。 1. 开发环境 python 3.8 plotly（没安装的自行pip安装）百度地图API（获取所有线路的地铁站点信息...
收起
计算机基础语言学习线路图
千次阅读 多人点赞 2018-09-19 19:29:22
计算机基础语言学习线路图 HTML HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用元素 HTML计算机代码元素 HTML注释 ...
收起
编程语言
教你轻松又简单的绘制地铁线路图！！！
2021-04-27 15:30:00
地铁是主要以地下运输为主的交通系统。其轨道通常在地下隧道内。其中：地铁线路中的M,L,S,R分别代表：M...地铁线路图的绘制方法并不难，根据以下步骤就可以绘制出专业实用的地铁线路图。第一步：在电脑上下载亿图图示
收起
图标设计
Echarts实现中国地图线路图特效（一对多发射点）
千次阅读 2019-10-29 14:33:58
1、效果图 2、完整配置代码可以把代码直接贴到官网测试效果： https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon // 中国地图线路特效配置 start let geoCoordMap = { // 地图地点的...
收起
echarts
在地图上绘制两点间的线路图
千次阅读 2013-11-21 13:23:36
原理：用google找到两个经纬度之间的路线点，然后在地图上把点用线连起来，就成了线路图 下面看代码： currLocation = [[CLLocation alloc] initWithLatitude:34.82373560 longitude:113.67290260]; ...
收起
地图
基于 HTML5 Canvas 的交互式地铁线路图
2018-03-05 19:07:12
前言前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了...
收起
html5 canvas 交互式 hightopo
[翻译]产品线路图Excel及PPT模板
千次阅读 2019-01-22 00:10:53
路线图模版可以让人更容易...为了更方便编制产品线路图，可以直接下载以下模板并投入使用。这里提供了免费的Excel和PPT模板供您下载，这都是入手的好模板。您可以从大量不同类型的模板中选择并根据自己的需求进行裁剪。
收起
模板
Python绘制成都地铁全线路图！有路线图也搞不清楚啊！
2020-12-01 14:33:05
最近做一个地图可视化的项目需要在地图上画出成都已开通的地铁线路图，中间还是踩了几个小坑，记录一下整个过程。 1. 开发环境 python 3.8 plotly（没安装的自行pip安装）百度地图API（获取所有线路的地铁站点...
收起

js 基于高德地图在地图上画线路图

使用Google Earth画线路图

怎么样能画出铁路的线路图

android GoogleMap画导航线路图路径规划

android创建googlemap基础教程和画导航线路图

一、添加GoogleMap

二、添加导航线路图（路径规划）

三、额外知识（ HttpURLConnection和httpclient）

1，代码

2，效果

3，总结

百度地图基本使用及画线路轨迹播放问题

安卓百度地图基本配置及画线路轨迹问题

android和ios GoogleMap画导航线路图路径规划（Directions）

android和ios GoogleMap画导航线路图路径规划（Directions）

echarts 路线图实例线路图及线路图特效

用python画星空-【Python】手把手教你绘制星空旅游线路图

如何在地图上画线路 iphone开发

iOS开发学习线路图

Android 地铁线路图如何实现

web 前端学习线路图

用python画星空的代码简单-【Python】手把手教你绘制星空旅游线路图

基于百度地图画出物流起始线路

Plotly绘制成都地铁全线路图（线路可实时更新最新线路 + 完整代码）

计算机基础语言学习线路图

教你轻松又简单的绘制地铁线路图！！！

Echarts实现中国地图线路图特效（一对多发射点）

在地图上绘制两点间的线路图

基于 HTML5 Canvas 的交互式地铁线路图

[翻译]产品线路图Excel及PPT模板

Python绘制成都地铁全线路图！有路线图也搞不清楚啊！

如何画线路图

js 基于高德地图在地图上画线路图

使用Google Earth画线路图

怎么样能画出铁路的线路图

android GoogleMap画导航线路图 路径规划

android创建googlemap基础教程和画导航线路图

一、添加GoogleMap

二、添加导航线路图（路径规划）

三、额外知识（ HttpURLConnection和httpclient）

1，代码

2，效果

3，总结

百度地图基本使用及画线路轨迹播放问题

安卓百度地图基本配置及画线路轨迹问题

android和ios GoogleMap画导航线路图路径规划（Directions）

android和ios GoogleMap画导航线路图 路径规划（Directions）

echarts 路线图 实例 线路图 及线路图特效

用python画星空-【Python】手把手教你绘制星空旅游线路图

如何在地图上画线路 iphone开发

iOS开发学习线路图

Android 地铁线路图如何实现

web 前端学习线路图

用python画星空的代码简单-【Python】手把手教你绘制星空旅游线路图

基于百度地图画出物流起始线路

Plotly绘制成都地铁全线路图（线路可实时更新最新线路 + 完整代码）

计算机基础语言学习线路图

教你轻松又简单的绘制地铁线路图！！！

Echarts实现中国地图线路图特效（一对多发射点）

在地图上绘制两点间的线路图

基于 HTML5 Canvas 的交互式地铁线路图

[翻译]产品线路图Excel及PPT模板

Python绘制成都地铁全线路图！有路线图也搞不清楚啊！

如何画线路图

android GoogleMap画导航线路图路径规划

android和ios GoogleMap画导航线路图路径规划（Directions）

echarts 路线图实例线路图及线路图特效