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());