mpvue开发小程序如何使用腾讯官方小程序插件--地图
2018-07-31 本文已影响20人
it之承影含光
开发前的准备工作
1.官方开发文档的地址
2.到小程序开发平台添加腾讯地图插件
在mpvue代码中如何使用
1.在mpvue项目中的src目录下的main.js中加入下面代码
//注意和pages、window、tabBar在同一级目录
plugins: {
mapPlugin: {
version: "1.0.6",
provider: "wx5bc2ac602a747594"
}
}
注解:
mapPlugin:这个名称可以随便取名
version:插件版本号
provider:插件的appid
2.在当前index.vue页面中的引用
//html 格式
<map-route :route-info="routeInfo"></map-route>
//js 引用方式
let plugin = requirePlugin("mapPlugin")
//js 引用方式
let mapInfo = this.$store.state.addressInfo;
console.log(JSON.stringify(mapInfo))
let routeInfo = {
startLat: 39.90469, //起点纬度 选填
startLng: 116.40717, //起点经度 选填
startName: "我的位置", // 起点名称 选填
endLat: mapInfo.endLat, // 终点纬度必传
endLng: mapInfo.endLng, //终点经度 必传
endName: mapInfo.endName || "", //终点名称 必传
mode: "car" //算路方式 选填
};
this.routeInfo = routeInfo;
image.png
3.在当前main.js文件中的引用
import Vue from "vue";
import App from "./index";
const app = new Vue(App);
app.$mount();
export default {
config: {
navigationBarTitleText: "地图导航",
usingComponents: {
"map-route": "plugin://mapPlugin/mapRoute"
}
}
};
最终效果图
image.png