将谷歌地图与 Vue.js 一起使用

Question

我正在学习 Vue，我有以下问题。

我正在使用谷歌地图API来定位自己on click。同样在启动时，地图应该显示乌鲁鲁，就像我构建它时的文档一样。这奏效了。在现场开始地图打开，给我看乌鲁鲁。它还在new Vue对象之外工作。

问题是：当我把它放到new Vue对象中时，它不起作用。没有控制台错误，没有什么可以告诉我出了什么问题。地图只是保持空白。我猜问题是我实际上没有调用该函数。

我的 HTML 是：

<div id="map">
</div>

剧本是这样采用的。我相信回调部分是问题所在，但我不知道如何解决。

<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &callback=initMap"></script>

我的 Vue 是这样的：

var appAlex = new Vue({
el: "#root",
methods: {
/** Google maps
* Init map function from Google Maps docs
*/
initMap: function() {
var place = {
lat: -25.363,
lng: 131.044
// Barrie's location
// lat: 44.4001,
// lng: -79.666
};
map = new google.maps.Map(document.getElementById("map"), {
// I made it a global so I can use it in out events
zoom: 4,
center: place
});
var marker = new google.maps.Marker({
position: place,
map: map
});
},
findMe: function() {
appAlex.getInfo(appAlex.Url).then(ipInfo => {
// ipInfo;
let lattitude = ipInfo.loc.slice(0, 7);
let lng = ipInfo.loc.slice(8, 15);
let place = {
lat: parseFloat(lattitude),
lng: parseFloat(lng)
};
map.setCenter({
lat: place.lat,
lng: place.lng
});
map.setZoom(13);
// Making the cursor move to a new location.
let marker = new google.maps.Marker({
position: place,
map: map
});
});
}
}
})

可能有很多不好的风格错误，我也很乐意听到。正如我所说，这是我的第一个 Vue 应用程序，所以我不太了解它。

所以回顾一下：

InitMap函数在锁定在 Vue 对象中时不会被调用。

我找到了这篇文章，与我的非常相似，但我完全不明白。

我的脚本调用是这样的：

<footer>
<script src="./appAlex.js"></script>
<script src="./appSarah.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &callback=appAlex.initMap"></script>
</footer>

我在initMap前面尝试过使用和不使用appAlex，但没有运气。

Answer 1

您的代码中存在几个问题：

• 你定义了你的方法，但你从不调用它们。如果你想在挂载实例时使用一种方法(参见此处关于 vue 生命周期钩子的参考)，请在mounted()钩子中调用它

• 不需要在方法属性中声明 initMap。

• 如果要在用户单击<div id="map">时执行某些操作，请将其更改为<div id="map" @click="findMe">。它是 v-on：click 的简写，用于检测用户何时单击元素。

代码示例(未测试，但应该没问题)：

let map = null;
function initMap() {
const place = {
lat: -25.363,
lng: 131.044
// Barrie's location
// lat: 44.4001,
// lng: -79.666
};
map = new google.maps.Map(document.getElementById("map"), {
// I made it a global so I can use it in out events
zoom: 4,
center: place
});
const marker = new google.maps.Marker({
position: place,
map,
});
}
var appAlex = new Vue({
el: "#root",
mounted() {
// do something after mounting vue instance
initMap();
},
methods: {
findMe() {
appAlex.getInfo(appAlex.Url).then((ipInfo) => {
// ipInfo;
const lattitude = ipInfo.loc.slice(0, 7);
const lng = ipInfo.loc.slice(8, 15);
const place = {
lat: parseFloat(lattitude),
lng: parseFloat(lng)
};
map.setCenter({
lat: place.lat,
lng: place.lng
});
map.setZoom(13);
// Making the cursor move to a new location.
const marker = new google.maps.Marker({
position: place,
map,
});
});
}
}
})