VUE引入第三方天地图js

最新推荐文章于 2024-06-13 15:10:00 发布

龙石月

最新推荐文章于 2024-06-13 15:10:00 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/longshiyue2/article/details/102843576

版权

index.html 文件

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>second</title>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的Key" type="text/javascript"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

VUE文件

<template>
    <div>
      <header>天地图</header>
      <div  id="tMapDiv"></div>
    </div>
</template>
<script>
export default {
  name: 'tianditu',
  data () {
  },
  mounted: function () {
    this.loadMap()
  },
  methods: {
    loadMap () {
      var map = new T.Map('tMapDiv')
      map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
    }
  }
}
</script>
<style scoped>
</style>