0

晚安先生，

我想从 getJson Url 显示谷歌地图，并且我已经有方法将数据库中的数据解析为同一项目（其他控制器）上的 jsonArray，当我在地图中调用 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）以在谷歌地图中显示标记，并且该服务可以工作，但是我的js和我的getJson有控制台错误，这是我的js

 <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，我必须怎么做才能使我的代码正常工作？

4

0 回答 0