晚安先生,
我想显示来自getJson Url的google map,并且我已经有了将数据库中的数据解析到同一项目(另一个控制器)上的jsonArray的方法,当我在map中调用url时,出现此错误
Cross-Origin Rejection Rejected: Same Origin policy prohibits the reading of remote resources at http://127.0.0.1:8080/edclistapps/map_list. (Reason: CORS request was not successful)
我有一个带有getJSON方法的js从项目中的另一个服务调用(json)以在Google Map中显示标记,该服务可以工作,但是我的js和getJson出现控制台错误,这是我的js < / p>
<div class="controls">
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Merchant Grub</option>
<option value="BAKMI GM">BAKMI GM</option>
<option value="CHATIME">CHATIME</option>
<option value="PUYO">PUYO</option>
</select>
</div>
<div id="map-canvas"></div>
<script>
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// init map
function initialize() {
var center = new google.maps.LatLng(-6.121435, 106.774124);
var styles = [{ "stylers": [{ "saturation": -80 }, { "gamma": 2 }] }, { "featureType": "water", "stylers": [{ "lightness": -15 }] }];
var styledMap = new google.maps.StyledMapType(styles, { name: "EDC" });
var mapOptions = { scrollwheel: false, zoom: 4, center: center, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] } };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var url = "http://127.0.0.1:8080/edclistapps/map_list";
$.getJSON(url, function (markers1) {
$.each(markers1, function(key,val){
addMarker(key)
});
});
}
// add markers to map
function addMarker(marker) {
var category = marker[4];
var title = marker[3];
var pos = new google.maps.LatLng(marker[8], marker[9]);
var content = marker[3];
var city = marker[6];
var myIcon='http://ruralshores.com/assets/marker-icon.png';
marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map,
icon: myIcon
});
gmarkers1.push(marker1);
// marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
return function () {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
// infowindow.setContent(city);
infowindow.open(map, marker1);
// map.panTo(this.getPosition()); // pan to lat/long of map marker
map.setZoom(12);
}
})(marker1, content));
}
// filter markers by category
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
</script>
我正在使用springboot和thymeleaf,我该怎么做才能使代码正常工作?