Question

我正在尝试重现我在Google Earth / KML中创建的内容，但由于我缺乏使用JS的经验而在Google地图中遇到了问题。

我想使用XLS中的 lat，long，size和color 数据加载大约1000个标记。

我已经看到example如何使用来自 JSON 来源的数据来控制市场地位和规模，

我还看到了从XLS导入到JS数组的example。

在 XLS 文件中，数据位于以下列中：纬线，长线，尺寸，颜色和标签。颜色可以用 CSS 表示。标签将是工具提示的基础。

欢迎任何建议。

非常感谢

史蒂夫

Answer 1

我已经好几次了。有几个选择...

查看Google Fusion Tables - 它们非常易于使用且闪电般快速 - 能够处理500,000点。
对于1,000分，我会将Excel数据导出为CSV文件，然后将CSV转换为Javacript数组，并将数组和一些Javascript嵌入到您的网页中。我提供了一个Perl脚本，它将您从Excel中获取的CSV转换为Javascript数组 - 它可能不完美，但您会明白这一点。然后我提供了一些创建标记的Javascript，这可能也不完美，但你会明白这一点。

因此，这会将CSV文件转换为Javascript数组：

#!/usr/bin/perl

use strict;
use warnings;

my $printcomma=0;
print "var Points = new Array(\n";

while (<>) {

    # Trim end of line character
    chomp;

    my $line = $_;

    # Define variables to hold each CSV field
    my ($lat,$lon,$size,$color,$label) = split (',',$line);

    print ",\n" if $printcomma;

    print "{lat:'$lat',lon:'$lon',size:'$size',color:'$color',label:'$label'}";
    $printcomma = 1;
END
}
print ");\n";

您将其另存为“csv2js”，然后转到终端并输入：

chmod +x csv2js
./csv2js < yourCSVfile  > points.js

假设您的CSV文件如下所示：

53.1,0.002,100,255,Some label
52.7,0.011,1000,200,Another label
55.89,-0.78,10000,128,Yet another label

它将创建一个如下所示的文件：

var Points = new Array(
{lat:'53.1',lon:'0.002',size:'100',color:'255',label:'Some label'},
{lat:'52.7',lon:'0.011',size:'1000',color:'200',label:'Another label'},
{lat:'55.89',lon:'-0.78',size:'10000',color:'128',label:'Yet another label'});

然后，您将上面创建的文件（points.js）包含在以下文件的顶部，并将其用作HTML网页的基础：

<HTML>
<head>

<!-- Pull in Javascript version of Excel CSV -->
<script src="points.js"></script>

<!-- A bunch of your own stuff -->

<script type="text/javascript">
////////////////////////////////////////////////////////////////////////////////
// This function is called dynamically to build the Infowindow as it pops up as
// a result of the user clicking a pin on the map.
////////////////////////////////////////////////////////////////////////////////
function DeriveInfowindowContent(i){

    // Build the wording for the pop-up Infowindow, one piece at a time;
    var t1 = "<h4>"  + Points[i].label +  "</h4>";
    return t1;
}
////////////////////////////////////////////////////////////////////////////////
// Function called when webpage first loads
////////////////////////////////////////////////////////////////////////////////
function initialize() {

    ////////////////////////////////////////////////////////////////////////////////
    // Next line sets the latitude/longitude of map centre at startup. Use tools at
    // http://www.getlatlon.com to find a nice, new map centre's coordinates.
    ////////////////////////////////////////////////////////////////////////////////
    var myMapCentre = new google.maps.LatLng(51.50,-0.135);

    ////////////////////////////////////////////////////////////////////////////////
    // "zoom" sets the zoom (or scale) of the map
    // Use any value between 0-20, 12 seems about right to me.
    // Smaller numbers mean you see a larger area of ground in your browser.
    ////////////////////////////////////////////////////////////////////////////////
    var myOptions = {
        zoom: 12,
        center: myMapCentre,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    gmap = map; // Store in global var gmap

    // Just use one Infowindow and set its content each time before use, this 
    // saves memory and means old infowindow closes when user opens a new one.
    var Infowindow = new google.maps.InfoWindow();

    // Go through plotting all points on map
    for(var i=0;i<Points.length;i++){

       Points[i].LatLon     = new google.maps.LatLng(Points[i].lat,Points[i].lon);
           Points[i].Marker     = new google.maps.Marker({position:Points[i].LatLon,map:map});
       Points[i].Marker.index = i;

           google.maps.event.addListener(Points[i].Marker, 'click', function() {
                    var s=DeriveInfowindowContent(this.index);
                    Infowindow.setContent(s);
                    Infowindow.open(map,this);});
    }
}
</script>
</head>
<body onload="initialize()">

请注意，此代码对Excel电子表格中的“颜色”或“大小”参数没有任何作用，但我想您可以自己处理这些内容，因为现在您有了基本结构。

更新：由于这样做，我找到了一个很好的Javascript库，可以将Excel生成的CSV文件解析为数组，这意味着您不需要上面的Perl。请参阅Evan对this问题的回答。

Google地图标记 - 来自Excel的lat，long，size和color

1 个答案: