我正在学习Vue,遇到了以下问题。
我正在使用Google地图API来定位自己。同时,在启动时,地图应该像文档中一样显示Uluru。这个已经成功了。在网站启动时,地图打开并显示了Uluru。它也可以在
问题是:当我将其放入
我的HTML代码如下:
我正在使用Google地图API来定位自己。同时,在启动时,地图应该像文档中一样显示Uluru。这个已经成功了。在网站启动时,地图打开并显示了Uluru。它也可以在
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,但都没有成功。