小程序mpvue图片绘制水印_mpvue开发小程序如何使用腾讯官方小程序插件--地图

附带demo，码云地址

官方地图插件是有问题的，建议直接使用微信内置地图查看位置

//直接click调用

openMap() {

let mapInfo = {

startLat: 121.6695,

startLng: 31.268726,

endLat: 31.264907491401107,

endLng: 121.51072952012122,

endName: "上海市上海市杨浦区兰州路周家嘴路1333弄"

};

wx.openLocation({

//使用微信内置地图查看位置。

latitude: Number(mapInfo.endLat), //要去的纬度-地址

longitude: Number(mapInfo.endLng), //要去的经度-地址

name: "",

address: mapInfo.endName

});

}

开发前的准备工作

1.官方开发文档的地址

2.到小程序开发平台添加腾讯地图插件

image.png

一、在mpvue代码中如何使用(老版本的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 格式

//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"

}

}

};

二、在mpvue代码中如何使用(最新版本的mpvue使用方式)

1.在app.json中引入插件

{

"pages": [

"pages/index/main",

"pages/logs/main",

"pages/counter/main",

"pages/map/main"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

},

"plugins": {

"mapPlugin": {

"version": "1.0.6",

"provider": "wx5bc2ac602a747594"

}

}

}

2.在当前地图组件的main.json中引入插件

{

"navigationBarTitleText": "地图导航",

"usingComponents": {

"map-route": "plugin://mapPlugin/mapRoute"

}

}

3.在当前地图组件页面index.vue中使用方式是一样的

最终效果图

image.png