• vue2.0引入腾讯地图


    百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用。于是根据找的其他地图引用资料进行尝试。步骤如下。

    首先在src里面建立了TMap.js的文件,内容如下:

      export function TMap(key) {
              return new Promise(function (resolve, reject) {
                   window.init = function () {
                  resolve(qq)//注意这里
             }
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key="+key;
            script.onerror = reject;
            document.head.appendChild(script);
          })
        }

    然后,直接使用部分代码,我在map.vue里面使用代码如下:

    <template>
        <div id="container">
        </div>
    </template>
    <script>
    import { TMap } from '../TMap'
    export default {
        data() {
            return {
            }
        },
        mounted() {
            TMap('申请的key').then(qq => {
                var map = new qq.maps.Map(document.getElementById("container"), {
                    // 地图的中心地理坐标。
                    center: new qq.maps.LatLng(39.916527, 116.397128),
                     zoom: 8
                });
            });
        },
        methods: {
        },
        created: function () {
        }
    }
    </script>
    <style>
    #container {
        min-600px;
        min-height:767px;
    }
    </style>

    最后,出效果了如下:

  • 相关阅读:
    iOS加载动态图的两种方法
    python初探
    博客园封笔
    office的分栏技巧
    关于排序...
    LaTex 学习笔记
    vim 学习笔记
    iOS 编程学习笔记之Foundation框架
    数论
    扫描线概览
  • 原文地址:https://www.cnblogs.com/mrer/p/7144705.html
Copyright © 2020-2023  润新知