使用Vue.js与Google Maps

Question

使用Vue.js与Google Maps

javascriptvue.js

3

我正在学习Vue，遇到了以下问题。

我正在使用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，但都没有成功。

- Alex Ironside

1

你尝试在组件的“mounted”钩子中运行initMap了吗？ - Luis Orduz

我甚至不知道它是什么或如何使用它，但我会阅读相关资料。 - Alex Ironside

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Corentin André · Accepted Answer

您的代码存在以下几个问题：

您定义了方法，但从未调用过。如果您想在实例挂载时使用方法（请参见Vue生命周期图表这里），请在mounted()钩子中调用它。
您不需要在methods属性中声明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,
        });
      });
    }
  }
})