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-width:600px;min-height:767px;
}
</style>

最后，出效果了如下：

原文：https://www.cnblogs.com/mrer/p/7144705.html

vue2.0引入腾讯地图相关推荐

vue2.0引用腾讯地图
开始注册腾讯位置服务账号 vue引入js 创建map.vue 显示结果注册腾讯位置服务账号入门指南 vue引入js 项目根目录下的index.html里引入 <script charset ...
VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）
显示效果代码如下复制粘贴即可 //html 显示经纬度和搜索地图<el-row><el-col :span="12"><el-form-ite ...
[微信小程序]小程序引入腾讯地图选点插件出现：未取得授权
问题:小程序引入腾讯地图选点插件出现:未取得授权在微信小程序引入腾讯地图选点插件:官方文档 1.微信小程序接入腾讯地图服务,申请Key 2.在 app.json 中添加 "plugins& ...
Vue引入腾讯地图（搜索获取定位）
效果: 申请腾讯地图 1.首先进入腾讯位置服务登陆/注册,地址:https://lbs.qq.com/ 2.进入控制台,点击左侧菜单应用管理-我的应用,点击右上方创建应用,填写内容如下 WebServ ...
angular项目(TS)引入腾讯地图报找不到qq
文章目录在angular项目中引入腾讯地图问题解决结尾在angular项目中引入腾讯地图在index.html文件中script标签加载API服务 <script charset=&q ...
前端在vue2中嵌入腾讯地图（web端）
1.在腾讯位置服务中注册登录成为开发者腾讯位置服务 - 立足生态,连接未来 (qq.com) 2.新建一个应用获取一个key 控制台-->应用管理-->我的应用-->创建应用--& ...
Vue 引入腾讯地图 API 与实际应用保姆级分享
背景: 需求是大屏要加一个地图板块,同时把获取到的企业信息根据经纬度展示在地图中,并且要求鼠标悬浮打开企业信息的详细信息面板文章目录引入第三方地图组件库页面引入并初始化地图控件显示控制 DOM ...
uni-app引入腾讯地图
这篇地图开发教程先对uniapp开发map进行的说明,(uniapp是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多 ...
html引入腾讯地图导航
需要再http协议上打开,并且绑定过公众号,并把页面放到服务器上.否则打开则是空白页面链接后面需要带目的地坐标参数(或者从接口获取,但是一定要有一个目的地经纬度). &latitude=28 ...

vue2.0引入腾讯地图

vue2.0引入腾讯地图相关推荐

最新文章

热门文章