我正在使用 google maps api 在图表上绘制一些点，图表是使用数组绘制的，如下面的示例所示
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var markers = [{
"title": 'point4',
"lat": '1.355333',
"lng": '103.987305',
"description": 'uuu'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.352389',
"lng": '103.986538',
"description": 'zzz'
},{
"title": 'point1',
"lat": '1.353751',
"lng": '103.986688',
"description": 'xxxx'
}, {
"title": 'point2',
"lat": '1.352657',
"lng": '103.986184',
"description": 'yyyy'
}, {
"title": 'point3',
"lat": '1.352657',
"lng": '103.986184',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.350265',
"lng": '103.985165',
"description": 'uuu'
}];
var gmarkers = [];
var colorVariable = ["yellow", "green", "red", "saffron","yellow", "green", "red","yellow", "green", "red"];
var map;
var degree = 0;
function autoRotate() {
var $elie = $("#dvMap");
degree = degree + 65;
rotate(degree);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});
for (var i= 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(icon48.png("red", -degree));
}
}
}
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
heading: 90,
tilt: 45,
styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon:'icon48.png',
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
gmarkers.push(marker);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
var k=i;
i=i+1;
getDirections(src, des, colorVariable[k], map);
}
autoRotate();
}
function getDirections(src, des, color, map) {
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Intialize the Path Array
var path = [];
for (var i = 0; i < result.routes[0].overview_path.length; i++) {
path.push(result.routes[0].overview_path[i]);
}
//Set the Path Stroke Color
var polyOptions = {
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 8,
path: path,
map: map
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
});
}
function pinSymbol(color, rotation) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 1,
rotation: rotation,
scale: 1
};
}
</script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>
有人可以说一下如何用具有相同元素的 json 替换代码中的标记数组吗，我需要做哪些更改才能使用 json 而不是数组作为输入来做同样的事情
最佳答案
- 将您的 JSON 更改为有效(将
'更改为")，使用 jsonlint.com 进行验证。 - 将其保存在一个单独的文件中(在您的服务器上，与您将在其上显示它的网页位于同一域中)。
(一个选项)使用 JQuery's loadJSON加载 JSON 的方法(因为您已经包含了 JQuery)。
var jqxhr = $.getJSON("markers.json.txt", function( data, status, jXLR ) {在回调中，处理加载的 JSON，显示标记和折线。删除 map 中心对“标记”数组的依赖，该数组将不再存在)。
关于javascript - 如何向 google map api 而不是数组提供 json 有效负载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33774520/