Vue加载天地图

biu啊biu

于 2023-12-28 22:36:37 发布

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41928596/article/details/135279408

首先使用vue-cli脚手架创建vue项目，在国家地理信息公共服务平台天地图注册个账号，申请一个密钥key在vue项目的index.html中引入天地图api

<script
      type="text/javascript"
      src="http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxxxxx天地图key"
></script>

在vue mounted方法中创建天地图map，可指定初始经纬度位置、高度等信息

<template>
  <div id="mapDiv" style="width: 880px; height: 600px; margin-right: 10px">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    const T = window.T;
      let map = new T.Map("mapDiv", {
        projection: "EPSG:4326",
      });
      map.centerAndZoom(new T.LngLat(108.93, 34.26), 10);
  }
}
</script>

运行npm run serve，运行结果如图所示，天地图加载成功。