1、在public的index.html里引入腾讯地图的js
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你申请的key"></script>
2、在vue页面里创建一个容器
<template> <div id="container" style="width:600px;height:500px;"></div> </template>
3、methods里建立创建地图的方法
setMap() { //步骤:定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器 //设置地图中心点 var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude); //定义工厂模式函数 var myOptions = { zoom: 13, //设置地图缩放级别 center: myLatlng, //设置中心点样式 mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType } // //获取dom元素添加地图信息 var map = new qq.maps.Map(document.getElementById("container"), myOptions); }
4、执行方法
mounted(){ this.setMap(); }
参考:
https://www.cnblogs.com/TreeCTJ/p/13150851.html