天地图html改vue2写法

前往地址：

点击代码示例：

拷贝代码：

html代码，修改token：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－经纬度直投地图</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv', {
                projection: 'EPSG:4326'
            });
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何显示经纬度直投地图。</p>
</body>
</html>

vue写法：

<template>
  <div>
    <!-- 地图容器 -->
    <div id="mapDiv" ref="mapDiv"></div>
    <p>本示例演示如何显示经纬度直投地图。</p>
  </div>
</template>

<script>
export default {
  name: 'TiandituMap',
  mounted() {
    // 动态加载天地图API
    if (!window.T) {
      const script = document.createElement('script');
      script.src = "http://api.tianditu.gov.cn/api?v=4.0&tk=**************";
      script.onload = this.initMap;
      document.head.appendChild(script);
    } else {
      this.initMap();
    }
  },
  methods: {
    initMap() {
      // 初始化天地图实例
      this.map = new T.Map(this.$refs.mapDiv, {
        projection: 'EPSG:4326'
      });
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
    }
  }
};
</script>

<style scoped>
#mapDiv {
  width: 100%;
  height: 400px;
}
</style>

天地图html改vue2写法

猜你喜欢