精华内容
下载资源
问答
  • 需求:根据经纬度绘制标记点,点击标记点弹出弹框和底部按钮,点击顶部弹框进入二级界面,点击底部按钮弹出第三方地图软件选择页,实现跨进程跳转。 项目是公司项目,只放出重要部分代码。 绘制标记点: final ...

    需求:根据经纬度绘制标记点,点击标记点弹出弹框和底部按钮,点击顶部弹框进入二级界面,点击底部按钮弹出第三方地图软件选择页,实现跨进程跳转。

    效果图:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    项目是公司项目,只放出重要部分代码。

    
    					final Marker marker1 = aMap.addMarker(new MarkerOptions()
                        .position(latLng2)
                        .title("地址标题111111")
                        .snippet("地址内容1111"));
                final Marker marker2 = aMap.addMarker(new MarkerOptions()
                        .position(latLng3)
                        .title("地址标题22222")
                        .snippet("地址内容2222"));
    

    绘制标记点

     //标记点击事件
                AMap.OnMarkerClickListener markerClickListener = new AMap.OnMarkerClickListener() {
                    @Override
                    public boolean onMarkerClick(Marker marker) {
                        position = marker.getPosition();
                        title = marker.getTitle();
                        marker.showInfoWindow();
                        nav.setVisibility(View.VISIBLE);
                        //导航按钮点击
                        nav.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                showAnimation();
                            }
                        });
                        return true;
                    }
                };
    

    点击标记后获取到当前标记的经纬度和名称,显示底部按钮,点击按钮弹出第三方地图选择页。

    //标记上部弹框点击
                AMap.OnInfoWindowClickListener listener = new AMap.OnInfoWindowClickListener() {
                    @Override
                    public void onInfoWindowClick(Marker arg0) {
                            Toast.makeText(FangchanMapActivity.this, "点击了弹框1", Toast.LENGTH_SHORT).show();
                    }
                };
    

    点击标记顶部弹框进入二级界面,需要什么值就取什么值,后台还在出接口,我这边没有做操作

    //地图点击
                AMap.OnMapClickListener mapClickListener = new AMap.OnMapClickListener() {
                    @Override
                    public void onMapClick(LatLng latLng) {
                        marker1.hideInfoWindow();
                        marker2.hideInfoWindow();
                        nav.setVisibility(View.GONE);
                    }
                };
    

    这里只做了显示隐藏的操作

    			//设置图标
    			marker1.setIcon(BitmapDescriptorFactory.fromResource(R.mipmap.marker_icon));
    			//绑定点击事件
                aMap.setOnInfoWindowClickListener(listener);
                aMap.setOnMapClickListener(mapClickListener);
                aMap.setOnMarkerClickListener(markerClickListener);
    

    千万千万千万记得绑定点击事件在这里插入图片描述

    private void showAnimation() {
            LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View vPopupWindow = inflater.inflate(R.layout.layout_popupwindow, null, false);//引入弹窗布局
            popupWindow = new PopupWindow(vPopupWindow, ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.WRAP_CONTENT, true);
            TextView gaode = vPopupWindow.findViewById(R.id.gaode);
            TextView baidu = vPopupWindow.findViewById(R.id.baidu);
            TextView tengxun = vPopupWindow.findViewById(R.id.tengxun);
            TextView clean_text = vPopupWindow.findViewById(R.id.clean_text);
            gaode.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (MapUtil.isGdMapInstalled()) {
                        MapUtil.openGaoDeNavi(FangchanMapActivity.this, 0, 0, null, position.latitude, position.longitude, title);
                    } else {
                        //这里必须要写逻辑,不然如果手机没安装该应用,程序会闪退,这里可以实现下载安装该地图应用
                        Toast.makeText(FangchanMapActivity.this, "尚未安装高德地图", Toast.LENGTH_SHORT).show();
                    }
                }
            });
            baidu.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (MapUtil.isBaiduMapInstalled()){
                        MapUtil.openBaiDuNavi(FangchanMapActivity.this, 0, 0, null, position.latitude, position.longitude, title);
                    } else {
                        Toast.makeText(FangchanMapActivity.this, "尚未安装百度地图", Toast.LENGTH_SHORT).show();
                    }
    
                }
            });
            tengxun.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (MapUtil.isTencentMapInstalled()){
                        MapUtil.openTencentMap(FangchanMapActivity.this, 0, 0, null, position.latitude, position.longitude, title);
                    } else {
                        Toast.makeText(FangchanMapActivity.this, "尚未安装腾讯地图", Toast.LENGTH_SHORT).show();
                    }
                }
            });
            clean_text.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    popupWindow.dismiss();
                }
            });
            //设置背景透明
            addBackground();
            //设置进出动画
            popupWindow.setAnimationStyle(R.style.PopupWindowAnimation);
            //引入依附的布局
            View parentView = LayoutInflater.from(FangchanMapActivity.this).inflate(R.layout.layout_popupwindow, null);
            //相对于父控件的位置(例如正中央Gravity.CENTER,下方Gravity.BOTTOM等),可以设置偏移或无偏移
            popupWindow.showAtLocation(parentView, Gravity.BOTTOM, 0, 0);
        }
        private void addBackground() {
            // 设置背景颜色变暗
            WindowManager.LayoutParams lp = getWindow().getAttributes();
            lp.alpha = 0.7f;//调节透明度
            getWindow().setAttributes(lp);
            //dismiss时恢复原样
            popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
    
                @Override
                public void onDismiss() {
                    WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.alpha = 1f;
                    getWindow().setAttributes(lp);
                }
            });
        }
    

    底部弹框,popupwindow实现

    
    public class MapUtil {
    
        public static final String PN_GAODE_MAP = "com.autonavi.minimap";// 高德地图包名
        public static final String PN_BAIDU_MAP = "com.baidu.BaiduMap"; // 百度地图包名
        public static final String PN_TENCENT_MAP = "com.tencent.map"; // 腾讯地图包名
    
        /**
         * 检查地图应用是否安装
         * @return
         */
        public static boolean isGdMapInstalled(){
            return isInstallPackage(PN_GAODE_MAP);
        }
    
        public static boolean isBaiduMapInstalled(){
            return isInstallPackage(PN_BAIDU_MAP);
        }
    
        public static boolean isTencentMapInstalled(){
            return isInstallPackage(PN_TENCENT_MAP);
        }
    
        private static boolean isInstallPackage(String packageName) {
            return new File("/data/data/" + packageName).exists();
        }
    
        /**
         * 百度转高德
         * @param bd_lat
         * @param bd_lon
         * @return
         */
        public static double[] bdToGaoDe(double bd_lat, double bd_lon) {
            double[] gd_lat_lon = new double[2];
            double PI = 3.14159265358979324 * 3000.0 / 180.0;
            double x = bd_lon - 0.0065, y = bd_lat - 0.006;
            double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * PI);
            double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * PI);
            gd_lat_lon[0] = z * Math.cos(theta);
            gd_lat_lon[1] = z * Math.sin(theta);
            return gd_lat_lon;
        }
    
        /**
         * 高德、腾讯转百度
         * @param gd_lon
         * @param gd_lat
         * @return
         */
        private static double[] gaoDeToBaidu(double gd_lon, double gd_lat) {
            double[] bd_lat_lon = new double[2];
            double PI = 3.14159265358979324 * 3000.0 / 180.0;
            double x = gd_lon, y = gd_lat;
            double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * PI);
            double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * PI);
            bd_lat_lon[0] = z * Math.cos(theta) + 0.0065;
            bd_lat_lon[1] = z * Math.sin(theta) + 0.006;
            return bd_lat_lon;
        }
    
    
    
        /**
         * 打开高德地图导航功能
         * @param context
         * @param slat 起点纬度
         * @param slon 起点经度
         * @param sname 起点名称 可不填(0,0,null)
         * @param dlat 终点纬度
         * @param dlon 终点经度
         * @param dname 终点名称 必填
         */
        public static void openGaoDeNavi(Context context,double slat, double slon, String sname, double dlat, double dlon, String dname){
            String uriString = null;
            StringBuilder builder = new StringBuilder("amapuri://route/plan?sourceApplication=maxuslife");
            if (slat != 0) {
                builder.append("&sname=").append(sname)
                        .append("&slat=").append(slat)
                        .append("&slon=").append(slon);
            }
            builder.append("&dlat=").append(dlat)
                    .append("&dlon=").append(dlon)
                    .append("&dname=").append(dname)
                    .append("&dev=0")
                    .append("&t=0");
            uriString = builder.toString();
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.setPackage(PN_GAODE_MAP);
            intent.setData(Uri.parse(uriString));
            context.startActivity(intent);
        }
    
        /**
         * 打开腾讯地图
         * params 参考http://lbs.qq.com/uri_v1/guide-route.html
         *
         * @param context
         * @param slat 起点纬度
         * @param slon 起点经度
         * @param sname 起点名称 可不填(0,0,null)
         * @param dlat 终点纬度
         * @param dlon 终点经度
         * @param dname 终点名称 必填
         * 驾车:type=drive,policy有以下取值
        0:较快捷
        1:无高速
        2:距离
        policy的取值缺省为0
         * &from=" + dqAddress + "&fromcoord=" + dqLatitude + "," + dqLongitude + "
         */
        public static void openTencentMap(Context context, double slat, double slon, String sname, double dlat, double dlon, String dname) {
            String uriString = null;
            StringBuilder builder = new StringBuilder("qqmap://map/routeplan?type=drive&policy=0&referer=zhongshuo");
            if (slat != 0) {
                builder.append("&from=").append(sname)
                        .append("&fromcoord=").append(slat)
                        .append(",")
                        .append(slon);
            }
            builder.append("&to=").append(dname)
                    .append("&tocoord=").append(dlat)
                    .append(",")
                    .append(dlon);
            uriString = builder.toString();
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.setPackage(PN_TENCENT_MAP);
            intent.setData(Uri.parse(uriString));
            context.startActivity(intent);
        }
    
        /**
         * 打开百度地图导航功能(默认坐标点是高德地图,需要转换)
         * @param context
         * @param slat 起点纬度
         * @param slon 起点经度
         * @param sname 起点名称 可不填(0,0,null)
         * @param dlat 终点纬度
         * @param dlon 终点经度
         * @param dname 终点名称 必填
         */
        public static void openBaiDuNavi(Context context,double slat, double slon, String sname, double dlat, double dlon, String dname){
            String uriString = null;
            //终点坐标转换
    //        此方法需要百度地图的BaiduLBS_Android.jar包
    //        LatLng destination = new LatLng(dlat,dlon);
    //        LatLng destinationLatLng = GCJ02ToBD09(destination);
    //        dlat = destinationLatLng.latitude;
    //        dlon = destinationLatLng.longitude;
    
            double destination[] = gaoDeToBaidu(dlat, dlon);
            dlat = destination[0];
            dlon = destination[1];
    
            StringBuilder builder = new StringBuilder("baidumap://map/direction?mode=driving&");
            if (slat != 0){
                //起点坐标转换
    
    //            LatLng origin = new LatLng(slat,slon);
    //            LatLng originLatLng = GCJ02ToBD09(origin);
    //            slat = originLatLng.latitude;
    //            slon = originLatLng.longitude;
    
                double[] origin = gaoDeToBaidu(slat, slon);
                slat = origin[0];
                slon = origin[1];
    
                builder.append("origin=latlng:")
                        .append(slat)
                        .append(",")
                        .append(slon)
                        .append("|name:")
                        .append(sname);
            }
            builder.append("&destination=latlng:")
                    .append(dlat)
                    .append(",")
                    .append(dlon)
                    .append("|name:")
                    .append(dname);
            uriString = builder.toString();
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.setPackage(PN_BAIDU_MAP);
            intent.setData(Uri.parse(uriString));
            context.startActivity(intent);
        }
    }
    

    跳转第三方地图软件的工具类,参考这位老哥写的MapUtil

    结束!芜湖~

    展开全文
  • 支持打点获取坐标,环形标记,自定义形状标记 效果如下 直接上代码: <!DOCTYPE html> <html> <script src="js/jquery-2.1.3.min.js"></script> <head> <meta ...

    支持打点获取坐标,环形标记,自定义形状标记

    效果如下

    直接上代码:

    <!DOCTYPE html>
    <html>
    <script src="js/jquery-2.1.3.min.js"></script>
    <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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap {width: 100%; height:500px; overflow: hidden;}
        #result {width:100%;font-size:12px;}
        dl,dt,dd,ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        p{font-size:12px;}
        dt{
            font-size:14px;
            font-family:"微软雅黑";
            font-weight:bold;
            border-bottom:1px dotted #000;
            padding:5px 0 5px 5px;
            margin:5px 0;
        }
        dd{
            padding:5px 0 0 5px;
        }
        li{
            line-height:28px;
        }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xDf0Dc9oECn8wCHm8oXOCGVetPYanLGa"></script>
        <!--加载鼠标绘制工具-->
        <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
        <!--加载检索信息窗口-->
        <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
        <title>鼠标绘制工具</title>
    </head>
    <body>
        <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 
            <div id="map" style="width:800px;height:1000px;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
        </div>
        <div id="result">
            <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
            <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
            <input id="xy" value="" onclick="clearAll()"/>
        </div>
        <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('map');
        var poi = new BMap.Point(112.985714,28.218595);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();  
        var overlays = [];
        var overlaycomplete = function(e){
            overlays.push(e.overlay);
            //点击后获取经纬度
            map.addEventListener("click",function(e){
            $("#xy").val(e.point.lng + "," + e.point.lat);
            //alert(e.point.lng + "," + e.point.lat);
        });
        };
        var styleOptions = {
            strokeColor:"red",    //边线颜色。
            fillColor:"red",      //填充颜色。当参数为空时,圆形将没有填充效果。
            strokeWeight: 3,       //边线的宽度,以像素为单位。
            strokeOpacity: 0.8,    //边线透明度,取值范围0 - 1。
            fillOpacity: 0.6,      //填充的透明度,取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式,solid或dashed。
        }
        //实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: true, //是否开启绘制模式
            enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
            },
            circleOptions: styleOptions, //圆的样式
            polylineOptions: styleOptions, //线的样式
            polygonOptions: styleOptions, //多边形的样式
            rectangleOptions: styleOptions //矩形的样式
        });  
         //添加鼠标绘制工具监听事件,用于获取绘制结果
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);
        function clearAll() {
            for(var i = 0; i < overlays.length; i++){
                map.removeOverlay(overlays[i]);
            }
            overlays.length = 0   
        }
       /* map.addEventListener("click",function(e){
            alert(e.point.lng + "," + e.point.lat);
        });*/
        
    </script>
    </body>
    </html>

     

    详情请参考百度地图API

     

    展开全文
  • 博主的目的是在地图一些标记,然后保存为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文件。
    这样下来,文件可以秒开,给大家看下。
    在这里插入图片描述
    这样就算完成了,当然除了添加标记点,也还可以添加其他内容。
    最后鼓励一下自己:
    保持进步,保持好心情~~

    展开全文
  • 使用百度地图JavaScript API实现地图的生成、标记以及标注

    首先你需要引入一段javaScript

    <script type="text/javascript" src="http://api.map.baidu.com/api?         v=2.0&ak=你的密钥"></script>

    密钥申请很简单,按着步骤来,我是测试用的,写白名单的时候只需要写个 * 就行了,百度一个密钥也可以。

    我的需求是只能在地图上用一个标记,所以使用了一个time变量来计数,当用户点击在地图上,弹出询问框是否在此地标记,询问框是通过layer实现的。若用户点击确定,则通过ajax发送请求,将标记的经纬度以及传到这个网页的一些数据发送给后台进行持久化,前台通过结果选择是否标记。

    这是地图的显示:

        // 百度地图API功能
        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(****,**** ), 17); // 初始化地图,设置中心点坐标和地图级别,****代表经纬度,可以通过http://api.map.baidu.com/lbsapi/creatmap/ 来查看你需要的城市的经纬度
    
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
        }));
        map.setCurrentCity("你要显示的城市"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 
        //点击地图并在此添加标记
        map.addEventListener("click", function(e) {//鼠标单击地图触发
            if (time >= 1) {
                return;
            } else {
                popLayer(e);
            }
    
        });

    以下为显示效果:
    这里写图片描述

    这是popLayer方法,即鼠标单击地图触发:

    function popLayer(e) {
    
            //将经纬度存入form中  
            $("input[name='pointX']").val(e.point.lng);
            $("input[name='pointY']").val(e.point.lat);
    
            //取出经纬度
            pointX = $("input[name='pointX']").val();
            pointY = $("input[name='pointY']").val();
            //layer弹出询问框
            layer.open({
                title : '确认在此地标注?',
                content : '<p>许可证号:' + bjh + '</p><p>申请人/单位:' + sqr
                        + '</p><p>许可事项:' + sx + '</p>',
                yes : function(index, layero) {
                    //点击确认,即提交信息
                    $.ajax({
                        type : 'POST',
                        async : true,
                        url : '/bpm/bmfw/addMaker',
                        data : {
                                "bjh":bjh,
                                "sx":sx,
                                "sqr":sqr,
                                "pointX":pointX,
                                "pointY":pointY
                        },success : function(result){
                            console.log("成功");
                            //成功的话向地图上创建标记和标注
                            createMaker(e);
                        },error : function(){
                            console.log("创建标注失败!");
                        }
                    });
                    layer.close(index); 
                }
            });
        }

    这里写图片描述

    这是创建标记、标注的方法

    function createMaker(e){
            marker = new BMap.Marker(e.point);
            map.addOverlay(marker);
            map.panTo(e.point);
            /* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 */
            //创建右键菜单
            var markerMenu = new BMap.ContextMenu();
            markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
                    .bind(marker)));
            marker.addContextMenu(markerMenu);
            /* markerMenu.addItem(new BMap.MenuItem('提交', commitMapMsg
                    .bind(marker)));
    
            marker.addContextMenu(markerMenu); */
    
            //标注
            var text = "<p>许可证号:" + bjh + "</p><p>申请人/单位:" + sqr
                    + "</p><p>许可事项:" + sx + "</p>";
    
            var label = new BMap.Label(text, {
                offset : new BMap.Size(-85, -120)
            });
            //设置label(标注的样式)
            label.setStyle({
                color : "black",
                fontSize : "12px",
                height : "110px",
                //lineHeight : "20px",
                fontFamily : "微软雅黑",
                maxWidth : "none",
                border : "none"
            });
            marker.setLabel(label);
    
            time = time + 1;
        }

    这里写图片描述

    最后贴上完整jsp代码:

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    
    <html>
    <head>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script> -->
        <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
    <script type="text/javascript"
        src="<c:url value='/scripts/boostrap/jquery.min.js'/>"></script>
    <script type="text/javascript"
        src="<c:url value='/scripts/layer/layer.js'/>"></script>
    <link rel="stylesheet" type="text/css" media="all"
        href="/styles/layer/layer.css" />
    <title>标注事项地点</title>
    
    <style type="text/css">
    body, html, #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    
    </head>
    
    <body>
        <div class="container"><!-- 这是使用了bootstrap -->
            <div id="allmap"></div>
            <form class="form-horizontal" role="form" action="bpm/bmfw/addMaker"
                id="mapMsgForm" method="post">
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="hidden" name="bjh" value="${bjh }">
                        <!-- 许可编号 -->
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="hidden" name="sqr" value="${ sqr}">
                        <!-- 申请人 -->
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="hidden" name="sx" value="${sx }">
                        <!-- 事项 -->
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="hidden" name="pointX" value="">
                        <!-- 标记坐标 -->
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="hidden" name="pointY" value="">
                        <!-- 标记坐标 -->
                    </div>
                </div>
    
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default"></button>
                    </div>
                </div>
            </form>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        var marker;
        var time = 0;
        var bjh = $("input[name='bjh']").val();
        var sx = $("input[name='sx']").val();
        var sqr = $("input[name='sqr']").val();
        var pointX;
        var pointY;
    
        // 百度地图API功能
        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(119.847604, 31.274829), 17); // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
        }));
        map.setCurrentCity("宜兴"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 
        //点击地图并在此添加标记
        map.addEventListener("click", function(e) {
            if (time >= 1) {
                return;
            } else {
                popLayer(e);
            }
    
        });
    
    
        var removeMarker = function(e, ee, marker) {//删除标记
    
            $.ajax({
                type : 'POST',
                async : true,
                url : '/bpm/bmfw/deleteMaker',
                data : {
                        "bjh":bjh
                },success : function(result){
                    console.log("删除成功");
                    //成功的话向地图上创建标记和标注
                    map.removeOverlay(marker);
                    time = time - 1;
                },error : function(){
                    console.log("删除标注失败!");
                }
            });
        }
        var commitMapMsg = function(e, ee, marker) {//提交地图信息
    
            $("#mapMsgForm").submit();
    
        }
    
        function popLayer(e) {
    
            //将经纬度存入form中  
            $("input[name='pointX']").val(e.point.lng);
            $("input[name='pointY']").val(e.point.lat);
    
            //取出经纬度
            pointX = $("input[name='pointX']").val();
            pointY = $("input[name='pointY']").val();
    
            layer.open({
                title : '确认在此地标注?',
                content : '<p>许可证号:' + bjh + '</p><p>申请人/单位:' + sqr
                        + '</p><p>许可事项:' + sx + '</p>',
                yes : function(index, layero) {
                    //点击确认,即提交信息
                    $.ajax({
                        type : 'POST',
                        async : true,
                        url : '/bpm/bmfw/addMaker',
                        data : {
                                "bjh":bjh,
                                "sx":sx,
                                "sqr":sqr,
                                "pointX":pointX,
                                "pointY":pointY
                        },success : function(result){
                            console.log("成功");
                            //成功的话向地图上创建标记和标注
                            createMaker(e);
                        },error : function(){
                            console.log("创建标注失败!");
                        }
                    });
                    layer.close(index); 
                }
            });
        }
    
        function createMaker(e){
            marker = new BMap.Marker(e.point);
            map.addOverlay(marker);
            map.panTo(e.point);
            /* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 */
            //创建右键菜单
            var markerMenu = new BMap.ContextMenu();
            markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
                    .bind(marker)));
            marker.addContextMenu(markerMenu);
            /* markerMenu.addItem(new BMap.MenuItem('提交', commitMapMsg
                    .bind(marker)));
    
            marker.addContextMenu(markerMenu); */
    
            //标注
            var text = "<p>许可证号:" + bjh + "</p><p>申请人/单位:" + sqr
                    + "</p><p>许可事项:" + sx + "</p>";
    
            var label = new BMap.Label(text, {
                offset : new BMap.Size(-85, -120)
            });
            //设置label(标注的样式)
            label.setStyle({
                color : "black",
                fontSize : "12px",
                height : "110px",
                //lineHeight : "20px",
                fontFamily : "微软雅黑",
                maxWidth : "none",
                border : "none"
            });
            marker.setLabel(label);
    
            time = time + 1;
        }
    </script>
    
    
    展开全文
  • 调用百度地图api实现标记城市

    千次阅读 2014-08-04 11:21:29
    正在的项目用到了地图标记城市的功能,用了百度地图的sdk来实现,写篇博客把实现过程记录下。 下载sdk,工程配置,申请秘钥等基础步骤,开发人员可根据百度提供的开发指南一步一步操作,见此链接:
  • 文章目录image.png准备介绍全程只用一个标记:根据字段变化图标效果代码可能的问题 地图部件中的图标引入墙外链接,没有梯子不能正常显示 准备 添加地图部件 介绍 全程只用一个标记: 取消勾选Use marker ...
  • 地理信息地图标记KML与KMZ的区别

    万次阅读 2017-09-14 13:49:43
    地理信息地图标记KML与KMZ的区别KML (keyhole markup language)是以XML语言为基础开发的一种文件格式,用来描述和存储地理信息数据(点、线、面、图片等),是纯粹的xml文本格式,可用记事本打开编辑,所以kml文件很...
  • 地图相关应用的开发中,我们常常遇到一个问题,当地图标注点过多的时候,会造成用户体验差、应用卡顿的情况。所以,我们需要一套高效的算法来解决标注的聚合、分散的逻辑。 先上代码: 算法思想不局限于平台...
  • Marker 显示地图标记 Route 路线规划 Search 搜索 申请接入流程 高德地图的申请接入流程 1、首先到 [ 高德地图API官网] 申请注册帐号 2、进入控制台,点击应用管理,我们创建一个新的...
  • 多点轨迹连线后,点击左侧中间某个坐标,比如说点击软件路,右侧地图软件路坐标凸显,求大神指导怎么写,感谢 ![图片说明](https://img-ask.csdn.net/upload/201812/11/1544493093_738765.png)
  • 用C#写了一个工程,已经实现了点击地图上的结点按钮后,计算出结点间最短路径。现在要加一个功能,希望能在地图上,这里的地图就是一张图片,能显示计算出的最短路径,类似那些地图软件标记的路径。怎样实现??
  • 15.[开源][安卓][地图标记]android-mapviewballoons-master

    千次下载 热门讨论 2015-03-01 10:42:54
    15.[开源][安卓][地图标记]android-mapviewballoons-master
  • 这个DEMO是用来将多个地点标记地图上,然后点击节点弹出PopupWindow 下面是一些截图: main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  • 标记地图符号化的时候,是最常用的功能之一,一般来说,带有经纬度坐标的点信息,在地图上标志的位置,都会通过一个标记物来实现,很多时候把这个东东称之为“图钉”是非常形象的。 标记的方法名和语法如下:...
  • 通过Google地球软件获取的坐标数据在Google地图标记,也与真实位置相差甚远;因为Google地球反馈的坐标信息也是通过卫星GPS获取的。 3. 通过Google地图(网页版,右键“这是什么”即可查看)获取的坐标数据在Google...
  • //在activity执行onSaveInstanceState时执行mMapView.onSaveInstanceState (outState),实现地图生命周期管理 mMapView.onSaveInstanceState(outState); } @Override public void onClick(View v) { } @Override ...
  • 老板突发奇想要让用android加载h5做地图,还有根据请求的不同经纬度在地图上显示出不同的marker标记(。。。。这个破需求感觉没啥大用处,可能也就不懂软件的人看着高大上吧)本人小白,不会h5,也不会js。根据自己...
  • 用Opencv标记地图中的圆形区域、分离区域 实验环境 Visual Studio Code、Python(我们这里使用版本3.8.0)、Opencv(我们这里使用版本3.4.8.29) 实验步骤 一、安装Python 1.在官网https://www.python.org/下载...
  • 接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式" import noEmerIcon from "./img/emerManagement/noEmerIcon.png"; import emerIcon from "./img/emerManagement/emerIcon.png"; import ...
  • 数据的人都知道,每次报告或图表,大家最喜欢的莫过于数据可视化,可视化中最喜欢的莫过于数据地图。谁让大家都是视觉动物,而地图可视化最能唬人。 但是如何制作地图可视化,本文来分享一些技巧。 目前市场上...
  • BIGEMAP功能对比分析图| | | | | |【地图服务行业专家】BIGEMAP是全行业公认的【优秀知名软件】、高新技术企业、国内最早从事GIS领域研发的公司,为全国各行业提供GIS领域的软件产品、解决方案、技术指...
  • 最近闲的没事干,发现滴滴出行的app,地图上的小汽车可以跑,很炫是不是,我们公司也是车辆监控的app的,我就一直揣摩着怎么也让我们的小汽车在地图上跑来跑去啊,这样给人感觉好点,废话不说了,先看下滴滴出行的...
  • 共有40款 地图相关开源软件

    千次阅读 2016-09-28 19:56:21
    软件过滤: 所有编程语言 Java C/C++ Objective-C PHP Perl Python Ruby C# .NET ASP Google Go D语言 Groovy Scala JavaScript TypeScript HTML/CSS ActionScript VBScript Delphi/Pascal Basic ErLang COBOL ...
  • 当 Google 开始为地图 API 收费的时候,Mapbox 获得了巨大的发展机会。它的客户曾有 NPR、卫报、绿色和平组织和 FCC ,如今它为 Foursquare、Evernote 等公司提供地图服务。最近,MapBox 开始了一项野心勃勃的计划...
  • 带城市标注的地图——R软件

    千次阅读 2019-07-02 13:04:48
    par(mar=rep(0,4)) dat = read.csv(text = " 城市,jd,wd 北京,116.4666667,39.9 上海,121.4833333,31.23333333 天津,117.1833333,39.15 重庆,106.5333333,29.53333333 哈尔滨 ,126.6833333,45.75 ...
  • bigemap大地图软件功能对比分析

    千次阅读 2018-06-20 17:23:13
    BIGEMAP功能对比分析图| | | | | |【地图服务行业专家】BIGEMAP是全行业公认的【优秀知名软件】、高新技术企业、国内最早从事GIS领域研发的公司,为全国各行业提供GIS领域的软件产品、解决方案、技术指...
  • [这个是我的运行界面,我想在这个地图上添加我存在oracle数据库中的经纬度点,请问应该怎么实现,我可以把oracle中的数据导出成txt文档,只包含经纬度lat,lon的两列。]...
  • 今天,从地图软件的路径规划问题讲起,带你看看常用的最短路径算法(Shortest Path Algorithm)。 像 Google 地图。百度地图、高德地图这样的地图软件,应该会经常使用吧?如果从家开到公司,你只需要输入起始地址、...
  • 地图标注对企业的优势有哪些 ,什么是地图标注?对于企业有何好处,企业为什么要做地图标注

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,325
精华内容 5,730
关键字:

地图做标记的软件