如何在地图上显示位置

时间:2015-05-31 15:01:12

标签: javascript html dictionary

我正在寻找一种使用html,javascript或任何其他方式在世界地图上显示用户位置的方法,同时数据将从exel文件中提取。 位置数据基本上是城市名称,我想在世界地图上将其显示为每个用户的标记/点。

地图需要在网站上显示,并在每次用户刷新网站时更新。

有没有办法可以做到? 如果有人有类似的东西,我将非常感激。

感谢。

4 个答案:

答案 0 :(得分:1)

这些天最常见的方式是使用Google Maps他们有很多sample code here

可以在Open alternatives to Google-maps?

找到谷歌地图的替代品

您很可能需要学习一种能够读取电子表格数据并将其传递给前端的服务器端语言。解决方案存在于PHP,ruby,node.js,asp等...

答案 1 :(得分:0)

使用OpenLayers怎么样,这是一个完整的例子:

<强> HTML

<!DOCTYPE HTML>
<html>
 <head>
 <title>OpenLayers Demo</title>
  <style type="text/css">
  html, body, #basicMap {
      width: 100%;
      height: 100%;
      margin: 0;
  }
 </style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="map.js"></script>
</head>
<body>
   <div id="basicMap"></div>

<script>
 init();
</script>
</body>
</html>

<强> JS

function init() {
map = new OpenLayers.Map("basicMap", {
    controls: [
               new OpenLayers.Control.Navigation(),
               new OpenLayers.Control.ArgParser(),
               new OpenLayers.Control.Attribution()
           ]
       });
var mapnik         = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position       = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom           = 3

map.addLayer(mapnik);
map.setCenter(position, zoom );

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var marker = new OpenLayers.Marker(position);

marker.events.register("click", map , function(e){ alert("click");
});

markers.addMarker(marker);
}

请注意,这只是一个示例,不推荐使用标记。

有关更多信息,请查看http://dev.openlayers.org/docs/files/OpenLayers-js.html

答案 2 :(得分:0)

如果您决定使用Google地图,则可以将Excel数据加载到Google电子表格中。然后,可以从电子表格直接在Google地图上映射这些位置。看看这个demo即可开始使用。

答案 3 :(得分:0)

如果您想在不编写代码的情况下执行此操作,请查看GeoSheets以直接从电子表格创建地图。 GeoSheets是Google表格的免费插件,可以非常轻松地创建自定义和可嵌入的地图。