百度很多東西,然后我沒找到騰訊地圖在VUE2.0里面的引用。于是根據(jù)找的其他地圖引用資料進行嘗試。步驟如下。
首先在src里面建立了TMap.js的文件,內(nèi)容如下:
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>
最后,出效果了如下:
標簽: vue, vue2.0, 騰訊地圖, vue使用騰訊地圖, 地圖, 引用騰訊地圖
http://www.cnblogs.com/mrer/p/7144705.html