uniapp运行到微信小程序,使用高德地图,并绘制线路图

小程序 0

一、准备工作

1.创建高德地图所必须的key

首先,你需要在高德开放平台注册你的key,在你注册完账号后,点击控制台

点击管理key

选择微信小程序,名称按要求来

完成后出现一条微信小程序的key,这个后续需要用到

2.下载并安装进uniapp项目并设置域名

可根据官方网站下载微信小程序插件

在你的小程序域名配置中加入高德地图的安全域名 

可根据官网第五步进行设置

二、代码内容

<template>  <view class="map">    <map id="map_container" :latitude="latitude" :longitude="longitude" scale="11" :markers="markers"      :polyline="polyline" :show-location="true" @markertap="markertap" @updated='mapUpdated' @tap='closeMapMarker'></map>  </view></template><script>import amap from "../../libs/amap-wx.130.js";export default {  data() {    return {      key: "c87827f15aec3e5d2c63cd41951d88c1",      amapPlugin: null,      latitude: 23.130061,      longitude: 113.264499,      mapInfo: [],      markers: [        {          iconPath: "../../static/c1.png",          id: 0,          latitude: 39.989643,          longitude: 116.481028,          width: 23,          height: 33        },        {          iconPath: "../../static/c2.png",          id: 0,          latitude: 39.90816,          longitude: 116.434446,          width: 24,          height: 34        }      ],      distance: "",      cost: "",      polyline: []    };  },  onLoad() {    this.amapPlugin = new amap.AMapWX({      key: this.key //该key 是在高德中申请的微信小程序key    });    this.amapPlugin.getRegeo({      type: "gcj02", //map 组件使用的经纬度是国测局坐标, type 为 gcj02      success: function(res) {        console.log(res);        const latitude = res[0].latitude;        const longitude = res[0].longitude;        this.longitude = longitude;        this.latitude = latitude;        this.mapInfo = res[0];      },      fail: res => {        console.log(res);      }    });    this.amapPlugin.getDrivingRoute({      origin: "116.481028,39.989643",      destination: "116.434446,39.90816",      success: data => {        console.log(data);        const points = [];        if (data.paths && data.paths[0] && data.paths[0].steps) {          const steps = data.paths[0].steps;          for (let i = 0; i < steps.length; i++) {            const poLen = steps[i].polyline.split(";");            for (let j = 0; j < poLen.length; j++) {              points.push({                longitude: parseFloat(poLen[j].split(",")[0]),                latitude: parseFloat(poLen[j].split(",")[1])              });            }          }        }        this.polyline = [          {            points,            color: "#0091ff",            width: 6          }        ];        if (data.paths[0] && data.paths[0].distance) {          this.distance = data.paths[0].distance + "米";        }        if (data.taxi_cost) {          this.cost = "打车约" + parseInt(data.taxi_cost) + "元";        }        // 添加路线信息到 markers 数组中        this.markers.push({          id: 1,          latitude: points[0].latitude,          longitude: points[0].longitude,          width: 23,          height: 33,          iconPath: "../../static/c1.png",          type: "polyline",          polyline: {            points: points,            color: "#0091ff",            width: 6          }        });        this.markers.push({          id: 2,          latitude: points[points.length - 1].latitude,          longitude: points[points.length - 1].longitude,          width: 23,          height: 33,          iconPath: "../../static/c2.png"        });      },      fail: info => {        // 失败处理      }    });  },  methods: {    markertap() {},    mapUpdated() {},    closeMapMarker() {}  }};</script><style lang="scss">.map {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;}#map_container {  width: 100%;  height: 100%;}</style>

 此内容可获取到当前手机定位信息,以及上述固定两个经纬度地点的一个路线绘制,在返回的信息中有详细信息可供使用,还需其他方法可前往高德开放平台查询相关API

也许您对下面的内容还感兴趣: