zoukankan      html  css  js  c++  java
  • 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>

    最后,出效果了如下:

  • 相关阅读:
    html----有关图像
    前端开发初学者
    angular js 正序倒叙
    viewpager无线轮播获取网络图片
    angular js 球星
    angular js shopping
    angular js 公告墙
    Android 常用正则表达式
    Android 内存泄漏
    TCP/IP,必知必会的
  • 原文地址:https://www.cnblogs.com/mrer/p/7144705.html
Copyright © 2011-2022 走看看