Javascript 在Vue.js中，如何从ThingSpeak API检索json数据并使用Google地图中的坐标？_Javascript_Google Maps_Vue.js_Vuejs2

Javascript 在Vue.js中，如何从ThingSpeak API检索json数据并使用Google地图中的坐标？

javascript google-maps vue.js vuejs2

Javascript 在Vue.js中，如何从ThingSpeak API检索json数据并使用Google地图中的坐标？,javascript,google-maps,vue.js,vuejs2,Javascript,Google Maps,Vue.js,Vuejs2,我正在构建一个Vue JS应用程序。我已经安装了这个软件包此外，我还有一个GPS跟踪器，它被配置为向ThingSpeak API发送数据我想做的是获取API中的最后一个坐标，并将其显示在Google地图上 Mycomponents\GoogleMap.vue使用以下代码： <template> <div> <GmapMap :options="{ center: center, zoomContro

我正在构建一个Vue JS应用程序。我已经安装了这个软件包

此外，我还有一个GPS跟踪器，它被配置为向ThingSpeak API发送数据

我想做的是获取API中的最后一个坐标，并将其显示在Google地图上

Mycomponents\GoogleMap.vue使用以下代码：

<template>
  <div>
    <GmapMap
      :options="{
          center: center,
          zoomControl: true,
          streetViewControl: false,
          clickableIcons: false,
          zoom: zoom,
          gestureHandling: 'auto',
          mapTypeId: 'hybrid'
      }"
      style="width:100%;  height: 500px;"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="false"
        @click="center=m.position"
      ></GmapMarker>
    </GmapMap>
  </div>
</template>

<script>
export default {
  name: 'GoogleMap',
  data () {
    return {
      // just a dummy location for now: Accra, in Ghana
      // change this to get the API location from ThingSpeak
      // this center is exported to the template
      center: { lat: 5.5912045, lng: -0.2497708 },
      zoom: 13,
      markers: [{
        position: { lat: 5.5912045, lng: -0.2497708 }
      }]
    }
  }
}
</script>


导出默认值{
名称：“谷歌地图”，
数据（）{
返回{
//目前只是一个虚拟地点：加纳的阿克拉
//更改此选项以从ThingSpeak获取API位置
//此中心将导出到模板中
中心：{纬度：5.5912045，液化天然气：-0.2497708}，
缩放：13，
标记：[{
位置：{纬度：5.5912045，液化天然气：-0.2497708}
}]
}
}
}

另外，这是我的src\main.js：

（出于安全考虑，我已取出API密钥）

从“Vue”导入Vue
从“./App.vue”导入应用程序
导入“./registerServiceWorker”
从“./路由器”导入路由器
从“./store”导入存储
从“vue2谷歌地图”导入*作为VueLogleMaps
Vue.config.productionTip=false
Vue.use（VueLogleMaps{
负载：{
关键：
},
installComponents：true
})
新Vue({
路由器，
商店，
渲染：h=>h（应用程序）
}).$mount（“#应用程序”）

当我运行此操作时，地图将正确显示在我的网页上。但是，我不知道如何从ThingSpeak API获取坐标，而不是直接硬编码

我是Vue的新手

我可以在常规JS中这样做，但我似乎无法在Vue中这样做

以下是我所做的：

<!DOCTYPE html>
<html>
  <head>
    <title>Experiment</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>




    <script>
      // Initialize global variables



      // Initialize and add the map
      function initMap() {
        // get the last location sent 

        // get LATITUDE
        $.getJSON("https://api.thingspeak.com/channels/<CHANNEL_ID>/fields/1/last.json?api_key=<THINGSPEAK_READ_API_KEY>", function(result){

          var m = result;
          // set latitude as x
          x=Number(m.field1);

        });

        // get LONGITUDE
        $.getJSON("https://api.thingspeak.com/channels/<CHANNEL_ID>/fields/2/last.json?api_key=<THINGSPEAK_READ_API_KEY>", function(result){

          var m = result;
          // set longitude as y
          y=Number(m.field2);

        }).done(function (){

          coordinates = {lat: x, lng: y};


          // The map, centered at the location given
          var map = new google.maps.Map(
              document.getElementById('map'), {zoom: 13, center: coordinates});
          // The marker, positioned at the location given
          var marker = new google.maps.Marker({
            position: coordinates, 
            map: map,
            title: 'Click to get coordinates'
          });

          var infowindow = new google.maps.InfoWindow({
              content: '<p>Tracker Location: ' + marker.getPosition() + '</p>'
          });

          map.addListener('center_changed', function() {
            // 3 seconds after the center of the map has changed, pan back to the
            // marker.
            window.setTimeout(function() {
              map.panTo(marker.getPosition());
            }, 5000);
          });

          marker.addListener('click', function() {
            infowindow.open(map, marker);
            // when the marker is clicked, center map
            map.setCenter(marker.getPosition());
          });
        });





      }

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

  </body>
</html>


实验
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
//初始化全局变量
//初始化并添加映射
函数initMap（）{
//获取最后发送的位置
//获得自由
$.getJSON（“https://api.thingspeak.com/channels//fields/1/last.json?api_key=，函数（结果）{
var m=结果；
//将纬度设置为x
x=数量（m.field1）；
});
//获得经度
$.getJSON（“https://api.thingspeak.com/channels//fields/2/last.json?api_key=，函数（结果）{
var m=结果；
//将经度设置为y
y=数量（m.2）；
}).done（函数（）{
坐标={lat:x，lng:y}；
//以给定位置为中心的地图
var map=new google.maps.map(
getElementById（'map'），{zoom:13，center:coordinates}）；
//位于给定位置的标记
var marker=new google.maps.marker({
位置：坐标，
地图：地图，
标题：“单击以获取坐标”
});
var infowindow=new google.maps.infowindow({
内容：'跟踪器位置：'+marker.getPosition（）+''
});
map.addListener（'center_changed'，function（）{
//地图中心更改3秒后，平移回地图中心
//马克。
setTimeout（函数（）{
map.panTo（marker.getPosition（））；
}, 5000);
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
//单击标记后，将显示中心地图
map.setCenter（marker.getPosition（））；
});
});
}

所以基本上，我只是想重做，但在Vue中。谢谢…

从顶部开始，您必须了解什么是vue生命周期[全部是关于，您需要控制已创建和已装载挂钩之间的事件。如果您可以使用fetch或axios在已创建的周期中从api中获取数据，则可以在装载完成之前使用这些值来构建地图属性。我想您离这样做还有3个读数。类似这样的沙盒可以继续指导您

<!DOCTYPE html>
<html>
  <head>
    <title>Experiment</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>




    <script>
      // Initialize global variables



      // Initialize and add the map
      function initMap() {
        // get the last location sent 

        // get LATITUDE
        $.getJSON("https://api.thingspeak.com/channels/<CHANNEL_ID>/fields/1/last.json?api_key=<THINGSPEAK_READ_API_KEY>", function(result){

          var m = result;
          // set latitude as x
          x=Number(m.field1);

        });

        // get LONGITUDE
        $.getJSON("https://api.thingspeak.com/channels/<CHANNEL_ID>/fields/2/last.json?api_key=<THINGSPEAK_READ_API_KEY>", function(result){

          var m = result;
          // set longitude as y
          y=Number(m.field2);

        }).done(function (){

          coordinates = {lat: x, lng: y};


          // The map, centered at the location given
          var map = new google.maps.Map(
              document.getElementById('map'), {zoom: 13, center: coordinates});
          // The marker, positioned at the location given
          var marker = new google.maps.Marker({
            position: coordinates, 
            map: map,
            title: 'Click to get coordinates'
          });

          var infowindow = new google.maps.InfoWindow({
              content: '<p>Tracker Location: ' + marker.getPosition() + '</p>'
          });

          map.addListener('center_changed', function() {
            // 3 seconds after the center of the map has changed, pan back to the
            // marker.
            window.setTimeout(function() {
              map.panTo(marker.getPosition());
            }, 5000);
          });

          marker.addListener('click', function() {
            infowindow.open(map, marker);
            // when the marker is clicked, center map
            map.setCenter(marker.getPosition());
          });
        });





      }

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

  </body>
</html>