/**
* 坐标转换，百度地图坐标转换成腾讯地图坐标
* lng 腾讯经度（pointy）
* lat 腾讯纬度（pointx）
* 经度>纬度
*/
function bMapToQQMap(lng, lat) {

    if (lng == null || lng == '' || lat == null || lat == '')
        return [lng, lat];

    var x_pi = 3.14159265358979324;
    var x = parseFloat(lng) - 0.0065;
    var y = parseFloat(lat) - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    var lng = (z * Math.cos(theta)).toFixed(7);
    var lat = (z * Math.sin(theta)).toFixed(7);

    return [lng, lat];

}

/**
* 坐标转换，腾讯地图转换成百度地图坐标
* lng 腾讯经度（pointy）
* lat 腾讯纬度（pointx）
* 经度>纬度
*/

function qqMapToBMap(lng, lat) {

    if (lng == null || lng == '' || lat == null || lat == '')
        return [lng, lat];

    var x_pi = 3.14159265358979324;
    var x = parseFloat(lng);
    var y = parseFloat(lat);
    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
    var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
    var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
    return [lng, lat];

}

引言
 
近期博主在做地理数据可视化方面的研究，pyecharts提供了较好的工具，里面提供了很多图形，尤其是Map和Geo这两种图，一种是地图，一种是地理信息图。pyecharts的基础还是echart，echart是百度地图开源的一个数据可视化 JS 库，从我个人使用的情况来看，目前pyecharts（博主pyecharts版本是0.5.11）有这两个问题：
 
地图精度不够。目前pyecharts提供的地图层级有世界地图、各个国家的地图、中国各省地图、中国各地市图、区县图，到区县后，就不再细分，如果我想看某条道路的具体信息，就难以实现。
经纬度定位“不准确”。这不属于pyecharts是问题，应该属于百度地图在地理编码上的特点，当然，并不是说百度地图地理编码不准确，而是博主的目前在做的项目，地理位置都比较奇特，不管是BaiduMap还是AMap（高德地图）都很难定位到特别准确。由于pyecharts的底层地图是百度地图，所以看起来是pyecharts定位“不准确”。
 
要解决第一个问题，就是说想要更高层级的地图，这个就需要换可视化包了，也就是说，将pyecharts改成具有其他更高层级地图的可视化包。博主使用的是folium，这个包也很强大，pyecharts的强大之处在与echart的可视化功能，folium则体现在地图及地图的扩展应用上。folium目前支持OpenStreetMap、AMap等几种地图，但不支持百度地图。一度吐血，为啥我用的这两个包底层地图就不能通用下。但其实也好，为了用好这两个包，博主对百度、高德这两大地图大佬的开发文档进行了研究，现在将二者地理编码的方式记录下来。
 开发环境：
 
Python3.7；
pyecharts0.5.11；
pycharm
 
百度地图地理编码
 
开发文档看这里，使用前需要去申请AK，同时最好申请开发者认证，能提升访问限制。开发文档其实写的很详细，无非是爬虫get和json解析那一套，我直接上代码。
 
import json
import pandas as pd
import numpy as np
from urllib.request import urlopen, quote
import requests

def Scene2CoordinateBaiduMap(filename):
    data = pd.read_csv(filename)
    result = []
    i = 1
    j = 1
    for k in data['地点']:
        address = quote(k)  # 1
        url = 'http://api.map.baidu.com/geocoder/v2/?address=' + address + '&output=json&ak=yourAK'  # 2
        req = urlopen(url)

        res = req.read().decode()
        temp = json.loads(res)
        try:  # 3
            result.append(temp['result']['location'])
            print('catch %d \n' % i)
            i = i + 1
        except:
            result.append({'lat': 'null', 'lng': 'null'})
            print('fail %d \n' % j)
            j = j + 1

    print('成功定位%d个，成功率%.2f%%' % (i - 1, (i - 1) * 100 / (i + j - 2)))

    df = pd.DataFrame(result)
    df.to_csv('经纬度原始数据-百度地图.csv', index=False)

if __name__ == '__main__':
    main()
 
先看导入的包，访问百度地图API返回的都是json格式的数据，要对数据进行解析，自然少不了json包，pandas和numpy常规包，基本上很难不用到，后面两个是网页数据获取的包。高德地图地理编码也是这几个包，后面不再重复写。
 几点说明：
 #1quote函数是为了得到GBK的url编码，国内的网站编码都是GBK编码的；
 #2要把url里面的AK改成你自己申请的AK，而不是yourAK这个字符串；
 #3为啥要用try来处理，因为不是所有的地理编码都能成功，如果不用try处理，容易报错，程序会中断。
 这个函数写的很详细了，你提供一个CSV文件，其中一列命名为‘地点’，就能将你的所有填写的地点都能转换成经纬度，当然，也有不成功的，总体成功率在95%左右。总体来说，定位效果还是可以的，但是如果地点数据很多填写的不规范，地理编码虽然解析出经纬度，但很多都是有问题的，比如解析出来的点不在正确的地点，如下图。
 
 这些点本来应该都出现在无锡市地图上，但还有不少点在无锡市外，也就是说，解析的不正确。问题出在哪里？博主又回过头去看文档，文档里说，请求的参数除了address外，还有city，也就是城市，这个参数不是必须要写的，如果是写了这个，会不会就正确了呢？于是，我找了一个落在无锡地图之外的点，将请求网址写成这样：
 
http://api.map.baidu.com/geocoding/v3/?address=南湖大道双庆桥公交站前&city=无锡市&output=json&ak=您的ak&callback=showLocation
 
返回的数据如下：
 
showLocation&&showLocation({"status":0,"result":{"location":{"lng":120.31700801956372,"lat":31.532789952709309},"precise":0,"confidence":50,"comprehension":24,"level":"桥"}})
 
根据经纬度去百度地图拾取坐标系统中看看，巧了，点还对了。。。
 博主懵逼了，上午的时候，明明是不对的，所以才想到要写一篇博客来解决这个问题，回过头来一想，因为我上午写的请求网址是这样的：
 
http://api.map.baidu.com/geocoding/v3/?address=南湖大道双庆桥公交站前&city='无锡市'&output=json&ak=您的ak&callback=showLocation
 
无锡市我打了引号，其实是没必要打引号的。。。
 
 所以，实际上，在请求网址里面加上城市名，就能保证经纬度转换的时候，所有点都落在你想要的城市里面。。。
 持续吐血，这篇博客还要写吗，我上午已经按照我的解决思路，高德地图地理编码→高德地图转百度地图→pyecharts地点上图，这个套路，解析了3000+的地点。
 都写了3000多字了，还是继续写完吧。。。
 
高德地图地理编码
 
开发文档看这里
 ，技术细节与百度地图基本一致，请求格式上我换了一种写法，让读者可以更灵活的使用爬虫的技巧。
 上代码
 
def Scene2CoordinateAMap(filename):
    data = pd.read_csv(filename)
    sgdd = data['事故地点'].tolist()
    geo = []
    key = 'yourKEY'
    base = 'https://restapi.amap.com/v3/geocode/geo'
    j = 1
    k = 1
    for i in range(len(sgdd)):
        parameters = {'address': sgdd[i], 'key': key, 'city':'无锡'}
        response = requests.get(base, parameters)
        answer = response.json()
        try:
            pos = answer['geocodes'][0]['location']
            pos = pos.split(',')
            pos[0], pos[1] = pos[1], pos[0]
            geo.append(pos)
            print('catch %d \n'%j)
            j = j + 1
        except:
            geo.append([ 'null','null'])
            print('fail %d \n'%k)
            k = k + 1
    points = pd.DataFrame(geo)
    points.to_csv('经纬度填充-高德地图.csv', index=False, columns = ['lng', 'lat'])
    print('成功定位%d个，成功率%.2f%%' % (j - 1, (j - 1) * 100 / (j + k - 2)))
 
为啥我会写成‘无锡’，能理解了吧，我高德就是这么写的。。。
 可以看出来，和百度地图请求方式有一点不同，我用的是requests.get去请求的，其实网上更多的推荐是用这种方式去请求，而不是用urlopen，不过我个人习惯用urlopen，两者都行吧。
 
高德地图经纬度转百度地图经纬度
 
其实已经没啥必要写了，因为二者都差不多。
 文档看这里，上代码
 
def AMap2BaiduMap(filename):
    data = pd.read_csv(filename)
    base = 'http://api.map.baidu.com/geoconv/v1/?coords='
    tail = '&from=3&to=5&ak=yourAK'
    transpos = []
    j = 1
    k = 1
    for i in range(len(data)):
        url = base + str(data.iloc[i]['lng_Amap']) + ',' + str(data.iloc[i]['lat_Amap']) + tail
        req = urlopen(url)
        res = req.read().decode()
        temp = json.loads(res)
                     
        try:
            pos = list(temp['result'][0].values())  # 字典转列表
            transpos.append(pos)
            print('catch %d \n'%j)
            j = j + 1
        except:
            transpos.append(['null','null'])
            print('fail %d \n'%k)
            k = k + 1
    tran = pd.DataFrame(transpos)
    tran.to_csv('高德转百度.csv', index=False, columns = ['lng', 'lat'])
    print('成功转换%d个，成功率%.2f%%' % (j - 1, (j - 1) * 100 / (j + k - 2)))
 
注意下，链接里有这么句代码
 
from=3&to=5
 
官方文档解释如下：
 
 
 
源坐标类型：
 1：GPS设备获取的角度坐标，WGS84坐标;
 2：GPS获取的米制坐标、sogou地图所用坐标;
 3：google地图、soso地图、aliyun地图、mapabc地图和amap地图所用坐标，国测局（GCJ02）坐标;
 4：3中列表地图坐标对应的米制坐标;
 5：百度地图采用的经纬度坐标;
 6：百度地图采用的米制坐标;
 7：mapbar地图坐标;
 8：51地图坐标
 目标坐标类型：
 5：bd09ll(百度经纬度坐标);
 6：bd09mc(百度米制经纬度坐标)
 
 
我是高德经纬度转百度经纬度，自然是from=3to=5。
 看看转换经纬度后的pyecharts-Geo图吧
 
 全都在无锡市内了，大功告成，虽然没啥用了(╥╯^╰╥)
 
完

写在前面
 
近期博主工作太忙，快一个月没更新博客。今天跑了大半天的腿，被一堆破事儿弄的无比憋屈，写篇博客调节一下心情。
 博主的目的是在地图上做一些标记，然后保存为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文件。
 这样下来，文件可以秒开，给大家看下。
 
 这样就算完成了，当然除了添加标记点，也还可以添加其他内容。
 最后鼓励一下自己：
 保持进步，保持好心情~~

微信搜索：“二十同学” 公众号，欢迎关注一条不一样的成长之路       
 
我们都知道地球是圆的，电脑显示器是平的，要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程，这个过程就叫做投影（Projection）。在地球上我们通过经纬度来描述某个位置，而经过投影之后的地图也有自己的坐标系统，本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。
 
在百度地图API中，你需要了解如下坐标系：
 
经纬度：通过经度（longitude）和纬度（latitude）描述的地球上的某个位置。
平面坐标：投影之后的坐标（用x和y描述），用于在平面上标识某个位置。
像素坐标：描述不同级别下地图上某点的位置。
图块坐标：地图图块编号（用x和y描述）。
可视区域坐标：地图可视区域的坐标系（用x和y描述）。
覆盖物坐标：覆盖物相对于容器的坐标（用x和y描述）。
别被这么多的坐标系吓着，看完了后面的讲解相信你会逐渐理解它们。
 
经纬度
 
      这个就不多说了，不熟悉的可以翻翻地理书。但需要注意的是即便同是经纬度坐标也可能属于不同的坐标体系。一般GPS设备获取的经纬度属于WGS84坐标系，这是一个比较通用的坐标体系。由于某些原因国内不能直接使用WGS84坐标，因此百度地图API的经纬度是经过加密偏移的。
 
平面坐标
 
      前面说过，球面上的形状需要经过投影才能变换为平面上的形状，变换后就需要有一个平面坐标系统来描述地图上某个位置。百度地图API默认使用墨卡托投影（Mercator Projection），同样需要注意的是由于投影参数不同，同样是墨卡托投影也会有所差别。
 
      平面坐标系的原点与经纬度的原点一致，即赤道与0度经线相交的位置：
 
 
       在百度地图API中，平面坐标是以最大级别18级为基准的。就是说在18级下，平面坐标的一个单位就代表了屏幕上的1个像素。平面坐标与地图所展示的级别没有关系，也就是说在1级和18级下，天安门位置的平面坐标都是一致的。那么如何知道某个位置的平面坐标呢？可通过BMap.MercatorProjection类来完成，该类提供经纬度与平面坐标互相转换的方法。例如天安门的经纬度大约为116.404, 39.915，经过转换即可得到平面坐标：
 
var projection =new BMap.MercatorProjection();
var point = projection.lngLatToPoint(new BMap.Point(116.404, 39.915));
alert(point.x +", "+ point.y);
 
结果如下：
 
 
这个就是平面坐标。你可以这样理解它的含义：第18级下，天安门距离坐标原点的位置差为：12958175, 4825923.77，单位为像素。
 
像素坐标
 
在第18级下，我们直接将平面坐标向下取整就得到了像素坐标，而在其他级别下可以通过如下公式进行换算（这里取整为向下取整）：
 
像素坐标 = |平面坐标 × 2 zoom -18|
 
比如经过计算，在第4级天安门位置的像素坐标是：790, 294
 
 
不同级别下，同一个地理位置的像素坐标是不一样的，它与当前地图的级别相关。
 
图块坐标
 
       百度地图API在展示地图时是将整个地图图片切割成若干图块来显示的，当地图初始化或是地图级别、中心点位置发生变化时，地图API会根据当前像素坐标计算出视野内需要的图块坐标（也叫图块编号），从而加载对应的图块用以显示地图。
 
百度地图的图块坐标原点与平面坐标一致，从原点向右上方开始编号为0, 0：
 
 
如何知道某个位置的图块坐标呢？通过如下公式计算即可（这里为向下取整）：
 
图块坐标 =|像素坐标 ÷ 256|
 
      256实际上是每个图块的宽度和高度，我们用像素坐标除以这个数就知道图块坐标了。还以天安门为例，在第4级下天安门所在的图块编号为：3, 1，而在第18级下，图块编号为：50617, 18851
 
可视区域坐标
 
      地图都是显示在确定大小的矩形框中的，这个矩形框通常是开发者在初始化地图传入的某个容器元素。这个矩形框也有自己的坐标系，在百度地图API中称之为可视区域坐标系，它的原点位于矩形的左上角。
 
 
通过Map类的pointToPixel和pixelToPoint方法可以相互转换经纬度坐标与可视区域坐标。
 
覆盖物坐标
 
       覆盖物在实现上就是若干DOM元素，这些元素会被放在若干覆盖物容器内（具体请参考地图API开发指南），那么覆盖物的坐标实际上就是相对于这些覆盖物容器的坐标。在地图初始化完成后，覆盖物容器的左上角与地图可视区域左上角位置相同，一旦地图被移动、缩放，覆盖物容器位置就会发生变化。在自定义覆盖物的时候API提供经纬度信息，而开发者需要自行将经纬度转换为覆盖物的像素坐标，从而覆盖物才能显示在正确的位置上。这个转换过程可以通过Map的pointToOverlayPixel和overlayPixelToPoint两个方法来实现。