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>

    最后,出效果了如下:

  • 相关阅读:
    python知识点整理一
    Selenium之自动化常遇问题
    git学习
    哈,又是总结内容
    2.3返回IP地址(requests模块安装,get请求发送,loads 解析json到字典)
    2.2返回状态码的分类描述
    2.1JSON数据格式
    1.6file文件
    福利:字符串与字符编码
    1.5list中sort && sorted
  • 原文地址:https://www.cnblogs.com/mrer/p/7144705.html
Copyright © 2011-2022 走看看