精华内容
下载资源
问答
  • 博主的目的是在地图上做一些标记,然后保存为html网页文件,这样方便我的软件调用,前期我使用的folium包,这个包很强大,支持添加各种标记。但有几个缺点: 地图的底图不支持百度地图,博主想用这个包的话,就不得...

    写在前面

    近期博主工作太忙,快一个月没更新博客。今天跑了大半天的腿,被一堆破事儿弄的无比憋屈,写篇博客调节一下心情。
    博主的目的是在地图上做一些标记,然后保存为html网页文件,这样方便我的软件调用,前期我使用的folium包,这个包很强大,支持添加各种标记。但有几个缺点:

    • 地图的底图不支持百度地图,博主想用这个包的话,就不得不将数据点转到高德坐标系下,然后进行下一步工作,然而高德莫名其妙的封了我的账号,说我违规调取数据,简直莫须有;
    • 间歇性的出现一些未知的问题,比如添加的标记不显示等等,可以理解,毕竟外国人写的,也还不是很成熟;
    • 最要命的是地图加载太慢了,加载出来要接近一分钟。

    想一想,既然数据点是百度坐标系下的,百度地图又提供了API,何不直接在百度地图上画呢。
    好了,上编译环境。

    • Python3.7
    • Spyder

    功能实现

    API地址

    先上百度地图js API地址
    看看API示例:
    在这里插入图片描述
    语言是JavaScript,展示的界面是添加标记点,我把完整的示例代码贴出来,并解释一下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>添加点标记</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        </style>
        <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
    </head>
    <body>
        <div id="container"></div>
    </body>
    </html>
    <script>
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
    map.enableScrollWheelZoom(true);
    // 创建点标记
    var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
    var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
    var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935));
    var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931));
    // 在地图上添加点标记
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    map.addOverlay(marker4);
    </script>
    

    虽然博主没搞过JavaScript,不过语言大体相通,能看明白写的是什么,前面是网页的基础设置,主体在script标签中,定义了四个点,然后将这四个点添加到地图上。
    官方给的示例其实是有问题的,我填上了自己申请的AK,另存为html文件后却怎么也打不开,于是初略看了下代码,发现下面这行就是个坑:

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥">
    

    我稍微改了下,改成了:

    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥">
    

    就能显示了,不过显示还是不完整,猜测是可能缺少加载 BMapGL.Map方法的js包,所以不再纠结,于是在网上找了另外一段可以执行的代码,链接在这里
    这个代码也要加上https才行。有用的代码如下:

    <!DOCTYPE html>
    <html xmlns:asp="">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0"></script>
        <title>添加信息窗口</title>
    </head>
    <body>
    <div id="allmap"></div>
    </body>
    <script>
        // An highlighted block
        //百度地图API功能
    
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "//api.map.baidu.com/api?v=2.0&ak=d5Y5C26Xbhr3rBHo3GzzaA7xcXev6NL0&callback=init";
            document.body.appendChild(script);
        }
        window.init = function() {
            var map = new BMap.Map("allmap");            // 创建Map实例
            //var point = new BMap.Point(109.18592,34.36912); // 创建点坐标
            map.centerAndZoom(new BMap.Point(109.19708,34.36820), 15);  // 设置中心点,地图初始化
            //map.centerAndZoom(points,20);
            map.setCurrentCity("西安");          //设置当前城市
            map.clearOverlays();
            map.addControl(new BMap.MapTypeControl());
            map.enableScrollWheelZoom(true);                 //启用滚轮放大缩小
           
            //向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);
    
    
    		//向地图中添加标记点
            var myIcon =new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {    //小车图片
                offset: new BMap.Size(0, -5),    //相当于CSS精灵
                imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
            });
    
            var points = [new BMap.Point(109.19474,34.36847),new BMap.Point(109.19435,34.37712),new BMap.Point(109.19261,34.37617),new BMap.Point(109.19701,34.37728),new BMap.Point(109.19702,34.37776),new BMap.Point(109.19784,34.37738),new BMap.Point(109.19784,34.376911),new BMap.Point(109.1987,34.37333),new BMap.Point(109.19705,34.36824),new BMap.Point(109.1836,34.37393)];   //10个坐标点
    
            var marker1 =new BMap.Marker(points[1],{icon:myIcon});  // 创建10个标注
            var marker2 =new BMap.Marker(points[2],{icon:myIcon});
            var marker3 =new BMap.Marker(points[3],{icon:myIcon});
            var marker4 =new BMap.Marker(points[4],{icon:myIcon});
            var marker5 =new BMap.Marker(points[5],{icon:myIcon});
            var marker6 =new BMap.Marker(points[6],{icon:myIcon});
            var marker7 =new BMap.Marker(points[7],{icon:myIcon});
            var marker8 =new BMap.Marker(points[8],{icon:myIcon});
            var marker9 =new BMap.Marker(points[9],{icon:myIcon});
            var marker0 =new BMap.Marker(points[0],{icon:myIcon});
    
            map.addOverlay(marker1);              // 将标注添加到地图中
            map.addOverlay(marker2);
            map.addOverlay(marker3);
            map.addOverlay(marker4);
            map.addOverlay(marker5);
            map.addOverlay(marker6);
            map.addOverlay(marker7);
            map.addOverlay(marker8);
            map.addOverlay(marker9);
            map.addOverlay(marker0);
    
            map.setViewport(points);         //调整地图的最佳视野为显示标注数组point        
        loadJScript()
    </script>
    
    <script>
        layui.use('theme/settings/earth', layui.factory('theme/settings/earth'));
    </script>
    
    <!--<script type="text/javascript" src="js\jquery-2.1.1.min.js"></script>-->
    
    </html>
    
    

    Python实现

    好了,网页代码有了,可是博主并不会写html,只会简单的写写Python,如何把上面的代码合理的利用起来,并且将里面的变量改变成自己的点呢?
    博主的思路很简单,将上面这些代码分成几个部分的字符串,然后字符串拼接起来,最后形成一个完整的html网页代码。
    如果大家有仔细看上面的代码,会发现网页框架可以分成五部分:
    第一部分代码:

        <!DOCTYPE html>
        <html xmlns:asp="">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
                body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
            </style>
            <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=9Rz4tOb6PgQtqBt6K3YbSMBESLk8iYpE"></script>
            <title>添加信息窗口</title>
        </head>
        <body>
        <div id="allmap"></div>
        </body>
        <script>
            // An highlighted block
            //百度地图API功能
    
            function loadJScript() {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "https://api.map.baidu.com/api?v=2.0&ak=9Rz4tOb6PgQtqBt6K3YbSMBESLk8iYpE&callback=init";
                document.body.appendChild(script);
            }
            window.init = function() {
                var map = new BMap.Map("allmap");            // 创建Map实例
                //var point = new BMap.Point(109.18592,34.36912); // 创建点坐标
                map.centerAndZoom(new BMap.Point(120.2338341,31.58109976), 15);  // 设置中心点,地图初始化
                //map.centerAndZoom(points,20);
                map.setCurrentCity("无锡");          //设置当前城市
                map.clearOverlays();
                map.addControl(new BMap.MapTypeControl());
                map.enableScrollWheelZoom(true);                 //启用滚轮放大缩小
                map.addEventListener('click', function(e) {
                    alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
                    var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
                    alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
                });
                //向地图中添加缩放控件
                var ctrlNav = new window.BMap.NavigationControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    type: BMAP_NAVIGATION_CONTROL_LARGE
                });
                map.addControl(ctrlNav);
    
    
        		//向地图中添加标记点
                var myIcon =new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {    //小车图片
                    offset: new BMap.Size(0, -5),    //相当于CSS精灵
                    imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
                });
    

    这部分代码是基本不会变化的,改动无非就是那两个经纬度坐标和城市名。
    再看第二部分:

    var points = [new BMap.Point(109.19474,34.36847),new BMap.Point(109.19435,34.37712),new BMap.Point(109.19261,34.37617),new BMap.Point(109.19701,34.37728),new BMap.Point(109.19702,34.37776),new BMap.Point(109.19784,34.37738),new BMap.Point(109.19784,34.376911),new BMap.Point(109.1987,34.37333),new BMap.Point(109.19705,34.36824),new BMap.Point(109.1836,34.37393)];   //10个坐标点
    

    这部分是定义的数据点,就是说如果要更换数据点,应该在这里改。
    第三部分:

    		var marker1 =new BMap.Marker(points[1],{icon:myIcon});  // 创建10个标注
            var marker2 =new BMap.Marker(points[2],{icon:myIcon});
            var marker3 =new BMap.Marker(points[3],{icon:myIcon});
            var marker4 =new BMap.Marker(points[4],{icon:myIcon});
            var marker5 =new BMap.Marker(points[5],{icon:myIcon});
            var marker6 =new BMap.Marker(points[6],{icon:myIcon});
            var marker7 =new BMap.Marker(points[7],{icon:myIcon});
            var marker8 =new BMap.Marker(points[8],{icon:myIcon});
            var marker9 =new BMap.Marker(points[9],{icon:myIcon});
            var marker0 =new BMap.Marker(points[0],{icon:myIcon});
    

    第三部分是在为点添加标记,也是根据点来的,有多少点就写多少行。
    第四部分:

            map.addOverlay(marker1);              // 将标注添加到地图中
            map.addOverlay(marker2);
            map.addOverlay(marker3);
            map.addOverlay(marker4);
            map.addOverlay(marker5);
            map.addOverlay(marker6);
            map.addOverlay(marker7);
            map.addOverlay(marker8);
            map.addOverlay(marker9);
            map.addOverlay(marker0);
    
    

    第四部分是把标记点添加到map图层上去,也是根据自己的数据来的。
    第五部分:

        loadJScript()
    </script>
    
    <script>
        layui.use('theme/settings/earth', layui.factory('theme/settings/earth'));
    </script>
    
    <!--<script type="text/javascript" src="js\jquery-2.1.1.min.js"></script>-->
    
    </html>
    

    这部分也不需要动。
    既然代码已经分解清楚了,用Python来把这些代码串起来就很简单了,看看怎么实现的吧:

    #!/usr/bin/env python
    #-*- coding:utf-8 -*-
    # author:HP
    # datetime:2020/12/11 16:47
    import pandas as pd
    
    data = pd.read_csv('数据.txt', sep='\t')
    
    def get_html(YearData):
        var_point = []
        var_marker = []
        addOverlay = []
    
        for i in range(len(YearData)):
            point = 'new BMap.Point(' + str(YearData.loc[i, 'lon_baidumap']) + ',' + str(YearData.loc[i, 'lat_baidumap']) + ')'
            marker = 'var marker' + str(i) + '=new BMap.Marker(points[' + str(i) + '],{icon:myIcon});'
            overlay = 'map.addOverlay(marker' + str(i) + ');'
            var_point.append(point)
            var_marker.append(marker)
            addOverlay.append(overlay)
    
        points = ','.join(var_point)
        markers = '\n        '.join(var_marker)
        overlays = '\n        '.join(addOverlay)
    
        message1 = '''
        <!DOCTYPE html>
        <html xmlns:asp="">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
                body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
            </style>
            <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=9Rz4tOb6PgQtqBt6K3YbSMBESLk8iYpE"></script>
            <title>添加信息窗口</title>
        </head>
        <body>
        <div id="allmap"></div>
        </body>
        <script>
            // An highlighted block
            //百度地图API功能
    
            function loadJScript() {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "https://api.map.baidu.com/api?v=2.0&ak=9Rz4tOb6PgQtqBt6K3YbSMBESLk8iYpE&callback=init";
                document.body.appendChild(script);
            }
            window.init = function() {
                var map = new BMap.Map("allmap");            // 创建Map实例
                //var point = new BMap.Point(109.18592,34.36912); // 创建点坐标
                map.centerAndZoom(new BMap.Point(120.2338341,31.58109976), 15);  // 设置中心点,地图初始化
                //map.centerAndZoom(points,20);
                map.setCurrentCity("无锡");          //设置当前城市
                map.clearOverlays();
                map.addControl(new BMap.MapTypeControl());
                map.enableScrollWheelZoom(true);                 //启用滚轮放大缩小
                map.addEventListener('click', function(e) {
                    alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
                    var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
                    alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
                });
                //向地图中添加缩放控件
                var ctrlNav = new window.BMap.NavigationControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    type: BMAP_NAVIGATION_CONTROL_LARGE
                });
                map.addControl(ctrlNav);
    
    
        		//向地图中添加标记点
                var myIcon =new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {    //小车图片
                    offset: new BMap.Size(0, -5),    //相当于CSS精灵
                    imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
                });
        '''
        message2 = points
        message3 = markers
        message4 = overlays
        message5 = '''
                //map.setViewport(points);         //调整地图的最佳视野为显示标注数组point
    
    
            }
            loadJScript()
        </script>
    
        <script>
            layui.use('theme/settings/earth', layui.factory('theme/settings/earth'));
        </script>
    
        <!--<script type="text/javascript" src="js\jquery-2.1.1.min.js"></script>-->
    
        </html>
        '''
    
        message = message1 + '\n' + '        var points = [' + message2 + '];' + '\n        ' + message3 + '\n        ' + message4 + '\n' + message5
        return message
    
    
    for i in range(2011, 2020):
        yeardata = data[data.nian == i].reset_index(drop=True)
        message = get_html(yeardata)
        filename = 'qroad' + str(i) + '.html'
        with open(filename, 'w', encoding="utf-8")as f:
            f.write(message)
            f.close()
    

    还是简单解释一下代码吧:
    前面是数据导入,数据就是我的百度地图坐标系下的经纬度坐标点。
    然后是写方法,主要就是循环把点生成字符串,然后五部分加起来。
    最后调用方法,生成html文件。
    这样下来,文件可以秒开,给大家看下。
    在这里插入图片描述
    这样就算完成了,当然除了添加标记点,也还可以添加其他内容。
    最后鼓励一下自己:
    保持进步,保持好心情~~

    展开全文
  • 用C#写了一个工程,已经实现了点击地图上的结点按钮后,计算出结点间最短路径。现在要加一个功能,希望能在地图上,这里的地图就是一张图片,能显示计算出的最短路径,类似那些地图软件标记的路径。怎样实现??
  • 最近闲没事干,发现滴滴出行app,地图上的小汽车可以跑,很炫是不是,我们公司也是车辆监控app,我就一直揣摩着怎么也让我们小汽车在地图上跑来跑去啊,这样给人感觉好点,废话不说了,先看下滴滴出行...

    最近闲的没事干,发现滴滴出行的app,地图上的小汽车可以跑,很炫是不是,我们公司也是做车辆监控的app的,我就一直揣摩着怎么也让我们的小汽车在地图上跑来跑去啊,这样给人感觉好点,废话不说了,先看下滴滴出行的界面;
    这里写图片描述

    1.我们的gps数据是车辆10秒上报一次位置数据;前端请求数据获取当前最新的gps位置;
    2.第一次请求到数据后我把所有的车辆先标记到地图上,高德地图有标记方法;
    3.标记到地图上以后,需要把marker存放到list记录下来(为了更新移动使用);
    4.当再次请求道新的gps数据的时候,我们需要平滑的移动到最新的位置,关键问题是再这里;怎么样在才能平滑移动呢,无非就是需要不断的移动从当前位置到最新的位置,这里就当时从A点移动到B点,无非就是marker.setPosition(),不断的调用知道B点,

    List<Marker> markersMap = new ArrayList(Marker);//存放地图上标记marker
    private void addMarkToMap(List<MarkerCarOptions> markerCarOptions){
    
                if(markersMap.size()!=0){
                //markersMap不为空,说明是更新marker
                for (Marker marker : markersMap) {
                    for (MarkerCarOptions options : markerCarOptions) {
                        if(marker.getObject().equals(options.car.getBusid())){
                            moverCar(marker, options);
                            break;
                        }
                    }
                }
    }
        /**
         * 更新地图车辆位置
         * @param markerCarOptions
         */
    private void moverCar(final Marker marker,final MarkerCarOptions options){
    
            //1,获取到起点到终点的点,默认绘制4个点,最后一个为终点
            final List<LatLng> roads = new ArrayList<LatLng>();
            LatLng startLatLng = marker.getPosition();//小车当前位置
            LatLng endLatLng = options.markerOptions.getPosition();//终点位置
    
            LatLng latLng_2 = new LatLng((startLatLng.latitude+endLatLng.latitude)/2, (startLatLng.longitude+endLatLng.longitude)/2);
            LatLng latLng_1 = new LatLng((startLatLng.latitude+latLng_2.latitude)/2, (startLatLng.longitude+latLng_2.longitude)/2);
            LatLng latLng_3 = new LatLng((latLng_2.latitude+endLatLng.latitude)/2, (latLng_2.longitude+endLatLng.longitude)/2);
    
            roads.add(latLng_1);
            roads.add(latLng_2);
            roads.add(latLng_3);
            roads.add(endLatLng);
            Thread t =new Thread(new Runnable() {
    
                @Override
                public void run() {
                    // TODO Auto-generated method stub
    
                    try {
    
                        for (int i = 0; i < roads.size(); i++) {
                            marker.setPosition(roads.get(i));
                            Thread.sleep(200);
                        }
                        marker.setIcon(options.markerOptions.getIcon());
    
                    } catch (Exception e) {
                        // TODO: handle exception
                        e.printStackTrace();
                    }
                }
            });
            t.start();
        }

    5,最后需要说明的是,大家问平均获取的中间点这样获取到底对不对,我告诉你确切的说是不准确的,但是在10秒每次上报的数据之间来这样算是没错的;具体大家可以测下下就知道了,稍后再上了例子好了

    展开全文
  • 地图下载器使用说明工具:地图下载器首先需要获取地图下载器免费...地图下载器免费授权后可以获得以下功能: 1)支持三维地图查看,可以搜索查询、定位、在地图上做标记、标绘、点线面; 2)支持AutoCAD文件导入...

    d07903c2745167bf27176a5b9df7b707.png

    地图下载器使用说明

    工具:地图下载器

    首先需要获取地图下载器免费授权;

    其次,按【如何下载谷歌地图高清卫星地图】的步骤进行下载;

    f176c4be8b253b8b59599e9163a17a8f.png

    如何获取授权?

    第一步,从网站上点击免费授权QQ群,加入免费授权QQ群;

    第二步,查看群公告;

    第三步,联系群里客服即可获取授权。

    地图下载器免费授权后可以获得以下功能:

    1)支持三维地图查看,可以搜索查询、定位、在地图上做标记、标绘、点线面;

    2)支持AutoCAD文件的导入、GPX、TXT、EXCEL、KML、SHP文件的打开,并且在地图下载器中套合配准;

    3)可以下载电子地图、卫星图、下载的图没有水印,最高等级17级(分辨率1米);

    注:1)免费授权我们只提供一种地图源的授权,是可以终身使用的,授权期满后可联系客服免费续期;

    2)如需下载更高清的卫星地图、历史影像、高程等高线、矢量路网等数据,请联系客服购买软件,谢谢您的支持与理解。

    展开全文
  • 老板突发奇想要让用android加载h5地图,还有根据请求不同经纬度在地图上显示出不同marker标记(。。。。这个破需求感觉没啥大用处,可能也就不懂软件的人看着高大上吧)本人小白,不会h5,也不会js。根据自己...

    前言:(原创文章,转载请注明出处)

    老板突发奇想要让用android加载h5做地图,还有根据请求的不同经纬度在地图上显示出不同的marker标记(。。。。这个破需求感觉没啥大用处,可能也就不懂软件的人看着高大上吧)本人小白,不会h5,也不会js。根据自己写过的webview的demo加上后台(比我js懂得多)的帮助,终于攻克了这个小难题,下面给大家一个小教程,以免走弯路。

    一:webview设置

    webView.getSettings().setAppCacheEnabled(true);//是否使用缓存api集

    webView.getSettings().setJavaScriptEnabled(true);//js交互

    webView.getSettings().setDomStorageEnabled(true);//与地图交互

    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置js可弹窗

    webView.setWebChromeClient(new WebChromeClient(){}//处理解析,渲染网页

    webView.setWebViewClient(new WebViewClient(){}//打开网页时不调用系统浏览器,而是在本地的webview显示

    二:js地图加载显示

    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.10&key=“你自己申请的key"></script>
    <script type="text/javascript">

    设置地图的中心点及缩放级别

    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.39, 39.9],
        zoom: 5
    });

    添加marker标记(marker是后台传过来的坐标数据)

    function didi(l,s){
        var marker = new AMap.Marker({
            position: new AMap.LngLat(114.38, 38.9),   // 经纬度对象,也可以是经纬度构成的一维数组[114.38, 38.9]
            title: ''
        });
    
        map.add(marker);
    
    }

     

    三:webview与js交互传值

    加载本地html(“路径固定这样写,html文件名带后缀引用时就加上后缀,不带后缀引用时就不要加后缀名”)

    webView.loadUrl("file:///android_asset/xinwenben.html");

    根据进度条显示地图加载情况

    @Override
                    public void onProgressChanged(WebView view, int newProgress) {
                        if(newProgress==100){
                            Toast.makeText(MapActivity.this, "地图加载完毕", Toast.LENGTH_SHORT).show();
                        }else{
                            Toast.makeText(MapActivity.this, "地图正在加载中", Toast.LENGTH_SHORT).show();
                        }
    
                    }

    单个传值:

    webView.loadUrl("javascript:didi(" + strLong + "," + strLat +")");//传参(经纬度)

    集合传值:

    /**
                 * 打开网页时不调用系统浏览器,而是在本地webview显示
                 */
                 
                webView.setWebViewClient(new WebViewClient(){
                    @Override
                    public void onPageFinished(WebView view, String url) {
    
                        Log.d("fan","这次地图加载完成了");
                        String[] strings=new String[10];
                        for (int i=0;i<list.size();i++){
                            //集合传参
                            webView.loadUrl("javascript:didi(要传的集合);
                        }
    
                         //   Log.d("fan","..."+strLong+"..."+strLat);
                    }
                });

    返回键点击事件

    /**
     * 重写返回键点击事件
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(webView.canGoBack() && keyCode==KeyEvent.KEYCODE_BACK){
            webView.goBack();//返回上一层页面
        }
        return true;
    }
    展开全文
  • JS自定义地图标注

    2017-12-31 16:45:58
    今天再来讲讲怎么在自定义地图(也不一定是地图上做标记,比如像一人员定位系统之类的软件,就需要用到类似的功能,不过以前大多都是在桌面软件上实现,今天我在这里演示如何在web平台实本功能,首先我们需要用到...
  • 人们往往喜欢在地图上做各种标记,不仅美观,而且使地图清晰,一目了然。于是应运而生了使用各种各样的图标作为地图标记的功能需求,在很多GIS软件上,这早已不是什么新鲜事了。然而在QGis二次开发的时候,同学们的...
  • JAVA百实例源码以及开源项目

    千次下载 热门讨论 2016-01-03 17:37:40
    有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码加以改进成小工具。 Java右键弹出...
  • 5个目标文件,演示Address EJB实现 ,创建一个EJB测试客户端,得到名字下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用clientgetHome()函数调用Home接口...
  • 项目需要 需要用到...这里做的例子是输入城市名和具体地点名,然后得到推荐结果,在下面显示出来,选择其中一个然后再地图上进行标记 效果图: 首先是AutoCompleteTextView部分 <AutoCompleteTe...
  • Viewport 移动设备上的Viewport就是设备屏幕能用来显示网页一块区域,即浏览器用来显示网页那部分区域。Viewport不局限于浏览器可视区域大小,可能比浏览器可视区域要大,也可能比浏览器可视区域要...
  • ASP.NET网页代码模型及生命周期

    热门讨论 2009-07-28 14:22:11
    在.aspx页面中,代码隐藏页模型.aspx页面代码基本和单文件页模型代码相同,不同是在script标记单文件页模型代码默认被放在了同名.cs文件中,.aspx文件示例代码如下所示。 “C#” AutoEventWireup=...
  • 通过兰图绘地图软件拉取到某一个城市指定区域的加密坐标(我这里业务需求是拉取标记的坐标),将其存入数据库。经过数据清洗之后以散点图及其连线的方式将其重现在html,同时保证生成的html中显示的坐标能够实现...
  • arcgis10.1正式版下载加完美破解

    千次下载 热门讨论 2012-08-14 19:20:54
    它可以创建标记的点,然后将地理标注的图片作为GDB的附件,直接在地图上显示出来。 4)GPX 2 Feature工具。它可以让GPS数据更容易,更直接地导入到ArcGIS中。 5) ArcMap对KML支持的改进 KML2Layer工具现在支持...
  • AR增强现实实景导航

    2016-02-29 18:08:50
    产品规划时候发现一款很酷应用:随便走,用户量大概在500万以上吧,其实就是一款AR增强现实实景导航软件,适合路痴步行找到1公里内目的地,这些目的地对应LBS中POI点,在高德和百度地图上都有标记。...
  • Android高级编程--详细书签版

    热门讨论 2013-02-06 17:37:52
    7.7.9 将View固定到地图地图的某个位置 240 7.8 对Earthquake示例添加地图功能 241 7.9 小结 247 第8章 后台工作 249 8.1 服务简介 250 8.1.1 创建和控制服务 250 8.1.2 将活动和服务绑定 259 8.2 使用...
  • java开源包1

    千次下载 热门讨论 2013-06-28 09:14:34
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包12

    热门讨论 2013-06-28 10:14:45
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • Java资源包01

    2016-08-31 09:16:25
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包101

    2016-07-13 10:11:08
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包11

    热门讨论 2013-06-28 10:10:38
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包6

    热门讨论 2013-06-28 09:48:32
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包10

    热门讨论 2013-06-28 10:06:40
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包8

    热门讨论 2013-06-28 09:55:26
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包9

    热门讨论 2013-06-28 09:58:55
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...
  • java开源包7

    热门讨论 2013-06-28 09:52:16
    Cleo 是一个灵活的软件库用于处理一些预输入和自动完成的搜索功能,该项目是 LinkedIn 公司的开源项目。 SwingSet 增强现实标记跟踪软件库 AccuTag AccuTag是AR(增强现实)标记跟踪软件库。它利用GPGPU的快速和...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

地图上做标记的软件