附带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.到小程序开发平台添加腾讯地图插件
一、在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 格式
<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;
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中使用方式是一样的
最终效果图