javascript - 地图标记不与 csv 数据一起显示
问题描述
我的任务是建立一个网页,可以上传一个包含近 1,000 个纬度/经度点的 csv 文件,并为每个点显示地图标记。我的网页加载 csv 文件时没有任何错误,但地图标记不显示。我测试了一个坐标来检查我的标记代码是否有效,所以我认为我的问题是我如何从 csv 访问纬度/经度点。
csv在一列中设置如下:lat;lon 38.631913;-121.434879 38.478902;-121.431028 ...
javascript代码:
function numberWithCommas(x)
{
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function handleFileSelect(evt)
{
var file = evt.target.files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
complete: function(results)
{
csv = [];
if(results.meta.fields.indexOf("weight") == -1)
{
for(idx in results["data"]) {
var row = results["data"][idx];
csv.push(new google.maps.LatLng(row["lat"], row["lon"]))
}
}
else
{
var max = results["data"][0]["weight"];
for(idx in results["data"])
{
var row = results["data"][idx];
max = Math.max(max, row["weight"]);
csv.push({locations: new google.maps.LatLng(row["lat"], row["lon"]), weight: row["weight"]});
}
$("#max-label").html("max: "+numberWithCommas(max));
}
console.log(results);
}
});
}
function initMap()
{
google.maps.visualRefresh = true;
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(38.58005837316562, -121.47850716420133),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var pointArray = new google.maps.MVCArray(csv);
//if(marker) marker.setMap(null);
for (var i = 0; i < csv.length; i++) {
var position = new google.maps.LatLng(pointArray[i][1], pointArray[i][2]);
var marker = new google.maps.Marker({
position: position,
map: map
});
marker.setMap(map);
}
}
$(document).ready(function(){
$("#csv-file").change(handleFileSelect);
google.maps.event.addDomListener(window, 'load', initMap);
$(function() {
$( "#draggable" ).draggable();
});
});
解决方案
推荐阅读
- c - 在石头,纸,剪刀中打破循环 - C
- outlook - Outlook REST API 2.0 路线图/生命周期
- python - Flask SQLAlchemy 'str' 对象没有属性 '_sa_instance_state'
- python - Django:在 settings.py 中使用日志记录
- java - SurfaceControl minLayer 和 maxLayer
- node.js - 如何将默认时间设置为当前时间 mongo 模式?
- jquery - Jquery Datepicker插件值属性不起作用
- javascript - Chrome 不会加载我的 js 脚本文件
- materialize - 在浮动按钮中实现 CSS 图标定位
- ios - 使用 Swift 4,如何获取本地存储的图像?