路线导航修改

zengh

2021-05-28 f3a211cddc0dc9dba43799dcca3de40e6bc05752

路线导航修改

 static/tabbar/investigation.png

 static/tabbar/investigationH.png

 xcxjingqingmap/css/lxdhmap.css

@@ -73,7 +73,7 @@
}

#mh_query li span {
    font-size: 5px;
    font-size: 12px;
    font-weight: 100;
    color: #000000;
}

 xcxjingqingmap/js/lxdhmap.js

@@ -12,6 +12,9 @@
        mh_query_show: true,

        ZBCXresult: null,
		
        LXdhEnd: null,
        LxdhLine: null,

        move: null, //存放移动实例

@@ -224,7 +227,7 @@
                    $("#mh_query").append(html);
                }

                //添加景点li点击事件，地图定位
                //添加li点击事件，地图定位
                $('#mh_query li').click(function() {

                    var ids = $(this).attr("id");
@@ -255,31 +258,43 @@
                            xy.push(resdata[i][0]);
                            data.push(xy);
                        }
						
                        if(that.LXdhEnd != null){
                            that.map.removeLayer(that.LXdhEnd);
                        }
                        if(that.LxdhLine != null){
                            that.map.removeLayer(that.LxdhLine);
                        }

                        //绘制起点和终点
                        var markers = L.markerClusterGroup();
                        that.LXdhEnd = L.markerClusterGroup();

                        var transportIcon = L.Icon.extend({ //图标初始化
                            options: {
                                iconSize: [30, 30], // 图标尺寸
                                iconSize: [56, 32], // 图标尺寸
                            }
                        });
                        var qd = new transportIcon({
                            iconUrl: './img/green.png'
                        });
					
                        var zd = new transportIcon({
                            iconUrl: './img/green.png'
                            iconUrl: './img/zd.png'
                        });
                        // var qd = new transportIcon({
                        //     iconUrl: './img/qd.png'
                        // });

                        var qdzb = res.data.result.query;

                        markers.addLayer(L.marker([qdzb.start.x, qdzb.start.y], {
                            icon: qd,
                        }));
                        markers.addLayer(L.marker([qdzb.end.x, qdzb.end.y], {
						
                        var x = resdata[resdata.length-1][0];
                        var y = resdata[resdata.length-1][1];
						
                        that.LXdhEnd.addLayer(L.marker([y, x], {
                            icon: zd,
                        }));
                        that.map.addLayer(markers);
                        // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
                        //     icon: qd,
                        // }));
						
                        that.map.addLayer(that.LXdhEnd);


                        that.showPolyLine(data);
@@ -298,12 +313,12 @@
                [28.6876, 115.858],
                [28.6791, 115.854]
            ];
            var polyline = L.polyline(xy, {
            that.LxdhLine = L.polyline(xy, {
                color: 'red'
            }).addTo(that.map);

            // zoom the map to the polyline
            that.map.fitBounds(polyline.getBounds())
            that.map.fitBounds(that.LxdhLine.getBounds())
        },

    },

 xcxjingqingmap/lxdhmap.html

@@ -5,7 +5,7 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>map</title>
    <title>地图</title>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>