有没有办法将坐标(从 csv 文件、xlxs 等)加载到我嵌入网页中的谷歌地图？我在网上看到的所有示例仅表明我必须登录谷歌地图本身。我想要做的是加载坐标并将标记放置到这些坐标上。 map 在我的网页中。有没有办法在 JavaScript 中执行此操作？
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>像上面的代码一样，但我有多个坐标，那么，我的代码是否使用一种方法或代码来从文件加载坐标并向其添加标记..？
最佳答案
假设您知道如何从 .csv 读取数据，并且知道如何将其转换为 数组。
因此，您可以迭代数组并根据需要添加标记，如下所示:
// get the file content via ajax
var csvContent = document.querySelector('#json').value;
var coords = [];
[].forEach.call(csvContent.split(/\n/g), function(a) {
coords.push(a.split(','));
});
markers = [];
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
function initialize() {
var mapProp = {
center:myCenter,
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (var i = 0; i < coords.length; i++) {
var marker = new google.maps.Marker({
position:new google.maps.LatLng(coords[i][0], coords[1][1])
});
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="http://maps.googleapis.com/maps/api/js"></script>
JSON file:
<textarea id="json">
51.5086,-0.12086
51.5186,-0.12087
51.5286,-0.12088
</textarea>
<hr />
<div id="googleMap" style="width:500px;height:380px;"></div>关于javascript - 将坐标加载到我的网页中的谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34839712/