Question

当前，代码使用Vue.js来管理输入和发布请求，并且正在使用JavaScript处理诸如Google Map功能之类的东西。

问题是，当我们在页面上的所有当前HTML上包裹div id以便Vue.js功能正常工作时，它会导致JavaScript文件中的Google Map代码无法正确运行，并加载没有地图的页面。删除Vue.js ID（adminVenueVue）后，地图即可正常运行。

在尝试调试问题时，负责更新地图的功能似乎并没有完全运行，并且在创建侦听器功能时停止运行，因为此后不会再运行任何代码。下面显示了此功能，如果您需要更多代码，请告诉我。

function initCreateUpdateVenue() {
  var mapCenter = new google.maps.LatLng({
    lat: 54.445886,
    lng: -3.435974
  });

  var marker, london = {
    lat: 52.41,
    lng: -1.69
  };

  var ZoomLevel = 5;

  map = new google.maps.Map(document.getElementsByName('googleMap')[0], {
    zoom: ZoomLevel,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  map.setZoom(5);

  var input = (document.getElementsByName("autocomplete")[0]);
  var options = {
    componentRestrictions: {
      country: "uk"
    }
  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);
  autocomplete.bindTo('bounds', map);

  autocomplete.addListener('place_changed', function() {
    var element = document.getElementsByName("autocomplete")[0];
    //remove any errors
    element.classList.remove("is-invalid");

    var place = autocomplete.getPlace();

    if (!place.geometry) {
      return;
    }

    populate_hidden_fields(place);
    set_venue_detail_fields(place);
    populate_fields(place.address_components);
    set_map_location();
  });
}

这是HTML代码（Google Map代码在底部）

<div id="adminVenueVue">
  <div class="row">
    <div class="col-lg-12 ">
      <div class="row">
        <div class="col-lg-12 ui-sortable-disabled">
          <div class="panel">
            <div class="panel-heading disable-draggable">Administrator Controls</div>
            <div class="panel-body">
              @include('venue.components.admin_controls', ['submitButtonText' => 'Add Type'])
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 ui-sortable-disabled">
          <div class="panel">
            <div class="panel-heading disable-draggable">Start by finding your address</div>
            <div class="panel-body">
              @include('venue.components.autocomplete-form', ['submitButtonText' => 'Add Type'])
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 ui-sortable-disabled">
          <div class="panel">
            <div class="panel-heading disable-draggable">Venue Details</div>
            <div class="panel-body" style="padding-bottom: 16px;">
              @include('venue.components.venue-details', ['submitButtonText' => 'Add Type'])
            </div>
          </div>
        </div>
        <div class="col-lg-6 ui-sortable-disabled">
          <div class="panel">
            <div class="panel-heading disable-draggable ">Address Details</div>
            <div class="panel-body">
              @include('venue.components.form', ['submitButtonText' => 'Submit Venue'])
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 ui-sortable-disabled">
      <div class="panel">
        <div class="panel-heading disable-draggable">Map</div>
        <div class="panel-body">
          <div id="googleMap" name="googleMap" class="width-full" style="height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我建议使用Vue谷歌地图组件（vue2-google-maps）。

遵循以下示例代码：

<body>
  <div id="root">
    <google-map :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
      <ground-overlay source="./overlay.png" :bounds="{
            north: 1.502,
            south: 1.185,
            east: 104.0262,
            west: 103.5998,
        }" :opacity="0.5">
      </ground-overlay>
    </google-map>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
  <script src="vue-google-maps.js"></script>

  <script>
    Vue.use(VueGoogleMaps, {
      load: {
        key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
        v: '3.26',
      },
      // Demonstrating how we can customize the name of the components
      installComponents: false,
    });
    document.addEventListener('DOMContentLoaded', function() {
      Vue.component('google-map', VueGoogleMaps.Map);
      Vue.component('ground-overlay', VueGoogleMaps.MapElementFactory({
        mappedProps: {
          'opacity': {}
        },
        props: {
          'source': {type: String},
          'bounds': {type: Object},
        },
        events: ['click', 'dblclick'],
        name: 'groundOverlay',
        ctr: () => google.maps.GroundOverlay,
        ctrArgs: (options, {source, bounds}) => [source, bounds, options],
      }));
      new Vue({
        el: '#root',
        data: {
          place: '',
        },
      });
    });
  </script>

</body>

或者，如果您使用的是webpack和Vue文件组件，请按照以下说明进行操作。

首先安装它：npm install vue2-google-maps

然后将其注册到main.js文件中

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places', // This is required if you use the Autocomplete plugin
  }
})

因此，您可以像使用组件一样使用它：

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>

更多信息： https://www.npmjs.com/package/vue2-google-maps

https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html

https://alligator.io/vuejs/vue-google-maps/（教程）

Vue.js打破了Google Map功能

1 个答案: