mpvue开发小程序如何使用腾讯官方小程序插件--地图

开发前的准备工作

1.官方开发文档的地址
2.到小程序开发平台添加腾讯地图插件

image.png

在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