gpt4 book ai didi

javascript - 使用 javascript api 谷歌地图从 json 导入标记

转载 作者:行者123 更新时间:2023-11-28 14:49:32 27 4
gpt4 key购买 nike

我有一个 json 文件:

{"lat": "45.496275", "lon": "19.700225"}
{"lat": "39.9332040422", "lon": "19.3821478025"}
{"lat": "42.7236250523", "lon": "22.6935022429"}
{"lat": "56.7236250523", "lon": "22.6935022429"}
{"lat": "45.7236250523", "lon": "22.6935022429"}
{"lat": "39.749522", "lon": "21.454769"}

和代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 80%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.7866, 20.4489),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("/home/user/Desktop/markers.js", function(json1) {
$.each(json1, function(key, data) {
var mylatlng = new google.maps.LatLng(data.lat, data.lon);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: mylatlng,
});
marker.setMap(map);
});
});
});
</script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&callback=myMap"></script>

</body>
</html>

我得到的只是一张空 map ,没有任何标记。我不知道出了什么问题,也许 json 的结构不是很好?另外,我尝试了更多的代码版本,但都是一样的......

最佳答案

请将您的 html 代码替换为以下代码。我调整了你的代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 80%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
</script>

<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.7866, 20.4489),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

$.ajax({
url:'/home/user/Desktop/markers.js',
dataType: "json",
success: function(data){
$.each(data, function(key, data) {
var mylatlng = new google.maps.LatLng(data.lat, data.lon);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: mylatlng,
});
marker.setMap(map);
});
}
});

}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

请确保marker.js位于正确的路径中,并用此替换marker.js json对象

[{"lat": "45.496275", "lon": "19.700225"},
{"lat": "39.9332040422", "lon": "19.3821478025"},
{"lat": "42.7236250523", "lon": "22.6935022429"},
{"lat": "56.7236250523", "lon": "22.6935022429"},
{"lat": "45.7236250523", "lon": "22.6935022429"},
{"lat": "39.749522", "lon": "21.454769"}]

关于javascript - 使用 javascript api 谷歌地图从 json 导入标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45053334/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com