Vue.js 破坏了谷歌地图功能答案

【问题标题】：Vue.js breaking Google Map functionalityVue.js 破坏了谷歌地图功能
【发布时间】：2018-12-30 21:04:00
【问题描述】：

目前该代码使用 Vue.js 来管理输入和发布请求，并使用 JavaScript 来处理诸如谷歌地图功能之类的事情。

问题在于，当我们将 div id 包裹在页面上的所有当前 HTML 以使 Vue.js 功能正常工作时，它会导致 JavaScript 文件中的 Google 地图代码运行不正确并加载没有地图的页面.一旦 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 代码（谷歌地图代码在底部）

<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>

【问题讨论】：

标签： javascript html laravel vue.js vuejs2

【解决方案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://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html

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

【讨论】：

感谢您的信息，我会试试看会发生什么:)
一切正常，但没有使用您推荐的组件。而是将所有 javascript 代码移至 vue js，并在更改一些值后使一切正常运行。如果其他人读到这个，这是我遵循的教程medium.com/dailyjs/…。