我想整体上了解javascript和json对象。原谅我的初学者术语，但是我有这五个json对象（它们是数据库查询的结果），我试图在地图上显示这五个坐标。我花了最后三个小时在互联网上搜索有关googlemaps的一些相关信息。那是一个失败，现在我在这里。我想知道如何将坐标输出到Google地图上。以下是我的代码，但是由于某种原因我的地图无法加载。
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&callback=initMap">
</script>
<script>
var json = {
"type": "Point",
"coordinates": [
[40.7666969299316, -73.9906158447266],
[40.6885147094727, -73.9647598266602],
[40.7145042419434, -74.0056304931641],
[40.704719543457, -74.0092620849609],
[40.7271041870117, -74.0029678344727]
]
}
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.730610, -73.935242),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var cods = json.coordinates;
for (i = 0; i < cods.length; i++) {
latlng = new google.maps.LatLng(cods[i][1], cods[i][0]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'test'
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div> <!-- ommiting this div will show the map -->
<div id="map-canvas"></div>
</div>
</body>
</html>
更新：
因此scaisEdge极大地帮助了我显示地图。因此生成了地图，但是我无法将json对象中的标记加载到地图上。我没想到Eb ...您已在此页面上多次包含Google Maps API，有人可以帮助我将json对象中的标记显示到Google地图上吗？
ALSO 这里是对代码的链接
如果要为每个纬度标记，则应将标记创建放置在循环中，并将此tye函数放置在循环中initilize（）
var json = {
"type": "Point",
"coordinates": [
[40.7666969299316, -73.9906158447266],
[40.6885147094727, -73.9647598266602],
[40.7145042419434, -74.0056304931641],
[40.704719543457, -74.0092620849609],
[40.7271041870117, -74.0029678344727]
]
}
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.730610, -73.935242),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var cods = json.coordinates;
for (i=0; i<cods.length; i++){
latlng = new google.maps.LatLng( cods[i][1], cods[i][0]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'test'
});
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句