javascript - 将 Google map 与 Vue.js 结合使用

Question

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

我正在使用 Google Maps API 点击定位自己。同样在启动时， map 应该像我构建它时的文档一样显示乌鲁鲁。这奏效了。在现场开始， map 打开并向我展示了乌鲁鲁。它也可以在 new Vue 对象之外工作。

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

我的 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 对象中时未被调用。

我找到了 this post ，和我的很像，但是完全看不懂。

我的脚本调用是这样的:

<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 生命周期钩子(Hook)引用 here )，在 mounted() 中调用它 Hook

• 您不需要在 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,
        });
      });
    }
  }
})