| 如何将csv里的经纬度位置数据可视化在百度地图上 | 您所在的位置：网站首页 › 怎么在百度地图里看经纬度 › 如何将csv里的经纬度位置数据可视化在百度地图上 |
如何将csv里的经纬度位置数据可视化在百度地图上
|
获取了带经纬度坐标的csv数据，需要通过以下步骤才能可视化在百度地图上，这部分踩了很多坑，写个笔记总结一下。 先放个成果图~
目录 1.CSV转JSON 2.跨域错误解决 3.将数据导入js中，并实现全局访问 4.申请百度地图浏览器端API 5.百度地图上可视化坐标位置 1.CSV转JSON话不多说，直接上代码 import json import pandas as pd if __name__ == '__main__': # 读取CSV文件 csvData = pd.read_csv(r'./已有托育机构分布（美团）.csv', header = 0) # 读取CSV文件包含的列名并转换为list columns = csvData.columns.tolist() # print(columns) num=数据的行数 for i in range(num): # 创建空字典 outPut = {} # 将CSV文件转为字典 for col in columns: outPut[col] = str(csvData.loc[i, col]) # 这里一定要将数据类型转成字符串，否则会报错 # 将字典转为json格式 jsonData = json.dumps(outPut) # 注意此处是dumps，不是dump # 保存json文件 with open(r'xxx.json', 'a') as jsonFile: jsonFile.write(',') #到时候再删掉多的逗号，加上中括号 jsonFile.write(jsonData)需要补充一下，我写的有点小问题但懒得改了，可以手动修改。将生成的json文件开头的逗号去掉，再在开头和结尾加上中括号，即是正确格式的json文件。 2.跨域错误解决在我想把json导入js时，一直报跨域错误Access-Control-Allow-Origin，把梯子关了也不行，后来使用以下方法解决 1.npm install anywhere 2.在你html所在的文件夹下，输入anywhere，会有新的弹窗，新弹窗里打开的文件即可以访问
会遇到两个问题，一个是数据如何传到js中，一个是如何实现数据全局访问，以下方法可以一次解决~ var inputData = (function () { var result; $.ajax({ type: 'GET', url: './xxx.json', dataType: 'json', async: false, //输入false表示同步，异步获取不了全局访问的数据 success: function (data) { result = data; } }); return result; })(); 4.申请百度地图浏览器端API百度地图控制台：https://lbsyun.baidu.com/apiconsole/key#/home 申请格式如下：
5.百度地图上可视化坐标位置 数据展示：json数据 [ { "id": "122", "lat_min": "23.09886824", "lng_min": "113.3187407", "lat_max": "23.10303315", "lng_max": "113.3232416", "center_lat": "23.1009507", "center_lng": "113.3209912", "bd_lat": "23.10676548", "bd_lng": "113.3275279" }, { "id": "158", "lat_min": "23.14469304", "lng_min": "113.3862339", "lat_max": "23.14885169", "lng_max": "113.3907293", "center_lat": "23.14677237", "center_lng": "113.3884816", "bd_lat": "23.15304997", "bd_lng": "113.3949119" }, { "id": "168", "lat_min": "23.181907", "lng_min": "113.2557883", "lat_max": "23.18606133", "lng_max": "113.260281", "center_lat": "23.18398417", "center_lng": "113.2580347", "bd_lat": "23.19012675", "bd_lng": "113.2645249" } ]可视化代码： xxx位置可视化地图 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #map_container { width: 100%; height: 100%; } var inputData = (function () { var result; $.ajax({ type: 'GET', url: './xxx.json', dataType: 'json', async: false, //一定要同步啊！ success: function (data) { result = data; } }); return result; })(); // console.log(inputData) let map = initMyMap() let data = initData(inputData); setData(map, data) /** * 初始化地图 * */ function initMyMap() { // 使用工具类获取城市的中心点坐标 let centerCity = mapv.utilCityCenter.getCenterByCityName('广州') // 使用 /examples/static/common.js 下的 initMap 方法进行地图的初始化 let map = initMap( { tilt: 45, //也可以设置倾斜0度 heading: 30, zoom: 10, center: [centerCity.lng, centerCity.lat], style: snowStyle } ) return map } /** * 初始化数据 */ function initData(shuru) { // 保存的是每一个点的数据信息 这些点需要进行构造 let data=[] // 需要绘制的点的数量 var inputData=shuru console.log(shuru) var len=inputData.length; console.log(len) for(var i=0;i |
【本文地址】
公司简介
联系我们