Livewire.emit 不是 function

Question

我剛剛學會了如何在 Livewire 中使用帶有 javascript 的谷歌地圖。 我做了一個測試項目，一切對我來說都很好。 嘗試將我的項目移動到生產項目時，我收到以下錯誤：

Livewire.emit 不是 function

我正在使用谷歌搜索框：

<input id="pac-input" class="controls" type="text" placeholder="Search Box" />
<div id="map"></div>

搜索效果很好。 但我需要將緯度和經度發送給 Livewire 監聽器

Livewire.emit('getLatitude', place.geometry['location'].lat());
Livewire.emit('getLongitud', place.geometry['location'].lng());

正如我在測試項目中提到的那樣，它對我來說效果很好，但在生產性項目中卻不行。 檢查主標簽是否為 DIV，我嘗試使用 @push @livewirescripts 並無法檢測到問題

我使用的完整 javascript 代碼：

<script>
function initAutocomplete() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -35.2385, lng: -65.6740 },
    zoom: 6,
    mapTypeId: "roadmap",
  });
  // Create the search box and link it to the UI element.
  const input = document.getElementById("pac-input");
  const searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
  });
  let markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener("places_changed", () => {
    const places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    // Clear out the old markers.
    markers.forEach((marker) => {
      marker.setMap(null);
    });
    markers = [];
    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();
    places.forEach((place) => {
      if (!place.geometry || !place.geometry.location) {
        console.log("Returned place contains no geometry");
        return;
      }
      const icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25),
      };
      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          icon,
          title: place.name,
          position: place.geometry.location,
        })
      );

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }

      /* document.getElementById('lat-span').value = (place.geometry['location'].lat());
      document.getElementById('lon-span').value = (place.geometry['location'].lng());
      document.getElementById('location-snap').value = place.formatted_address; */

      /* document.getElementById('lat-span').innerHTML = (place.geometry['location'].lat());
      document.getElementById('lon-span').innerHTML = (place.geometry['location'].lng());
      document.getElementById('location-snap').innerHTML = place.formatted_address; */

      Livewire.emit('getLatitude', place.geometry['location'].lat());
      Livewire.emit('getLongitud', place.geometry['location'].lng());

    });
    /* console.log(searchBox); */
    map.fitBounds(bounds);
  });
}

我可以嘗試修復它嗎？ 謝謝你的時間

Answer 1

我通過如下設置屬性來解決它：

@this.set('latitud', place.geometry['location'].lat());

@this.set('longitud', place.geometry['location'].lng());