目前，代码使用 Vue.js 来管理输入和发布请求，并使用 JavaScript 来处理 Google map 功能等内容。
问题是，当我们将 div id 包裹在页面上的所有当前 HTML 中以使 Vue.js 功能正常工作时，会导致 JavaScript 文件中的 Google map 代码运行不正确并加载没有 map 的页面。一旦 Vue.js id (adminVenueVue) 被删除， map 就可以正常工作。
当尝试调试问题时，负责更新 map 的函数似乎不会一直运行，并在创建监听器函数时停止，因为之后不会运行以下代码。下面展示了这个函数，如果您需要更多代码，请告诉我。
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>
最佳答案
我建议使用 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
关于javascript - Vue.js 破坏了 Google map 功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51478320/