微信小程序使用高德地圖

效果圖預(yù)覽

高德內(nèi)操作

• 高德開放平臺：

  • 注冊賬號(https://lbs.amap.com/)

  • 去高德地圖平臺申請小程序應(yīng)用的 key
    

  • 應(yīng)用管理(https://console.amap.com/dev/key/app) -> 我的應(yīng)用 -> 創(chuàng)建新應(yīng)用

    • 生成的 key 即可用在程序中
      

• 下載相關(guān) sdk 文件，導(dǎo)入 amap-wx.js 到項目中：https://lbs.amap.com/api/wx/download文章來源地址http://www.zghlxwxcb.cn/news/detail-483385.html

小程序內(nèi)

創(chuàng)建 AMapWX 對象

import amap from "@/static/amap-wx.130.js";

this.amapPlugin = new amap.AMapWX({
  key: this.mapKey, // 對應(yīng)高德里申請的key
});

api

• getRegeo

// 獲取位置
this.amapPlugin.getRegeo({
  success: (data) => {
    console.log('當(dāng)前定位', data)
    ...
  },
  // 獲取位置失敗
  fail: (err) => {
    uni.showToast({
      title: "獲取位置失敗，請重啟小程序",
      icon: "error",
    });
  },
});

獲取路線

• 公交：getTransitRoute
• 步行：getWalkingRoute

getTransitRouteData() {
  // 注意格式，'23.18139, 113.48067'此格式無效, 經(jīng)緯度小數(shù)點不超過6位
  const cur_des = {
    origin: "113.48067" + "," + "23.18139",
    destination: "113.30997" + "," + "23.08277",
  };
  this.amapPlugin.getTransitRoute({
    ...cur_des,
    city: this.city,
    strategy: 2,
    success: (data) => {
      console.log("getTransitRouteData", data);
    },
    // 獲取位置失敗
    fail: (err) => {
      ...
    },
  });
}

微信小程序地圖

實用功能

• includePoints: 縮放視野以包含所有給定的坐標(biāo)點

let mapc = uni.createMapContext("maps", this);
mapc.includePoints({
  points: cur_points,
  padding: [100, 100, 100, 100], // 設(shè)置上右下左的間距(px)
  success: function (e) {
    console.log("includePoints", e);
  },
});

map 組件

<map
  id="maps"
  style="width: 100%; height: 100vh"
  show-location
  show-compass
  enable-poi
  :latitude="curLocation.latitude"
  :longitude="curLocation.longitude"
  :scale="scale" // 縮放
  :markers="markers" // 顯示對應(yīng)標(biāo)記點
  :polyline="polyline" // 路線點
  @markertap="func" // 點擊標(biāo)記點觸發(fā)
>
</map>

js

<script>
import { api } from "@/utils/api.js";
import amap from "@/static/amap-wx.130.js";

export default {
  data() {
    return {
      city: "廣州",
      transitno: "", // 車次 B16
      result: [],
      amapPlugin: null,
      mapKey: "xxxxx9",
      curLocation: {}, // 地理位置

      scale: 16,
      markers: [
        //  {
        // iconPath: require("./imgs/start.png"),
        // id: 0,
        // latitude: 23.18139,
        // longitude: 113.48067,
        // width: 32,
        // height: 32
        //  },{
        // iconPath: require("./imgs/end.png"),
        // id: 0,
        // latitude: 23.08277,
        // longitude: 113.30997,
        // width: 32,
        // height: 32
        //  },
      ],
      polyline: [
        // {
        //   points: [
        // 	{ latitude: 23.18139, longitude: 113.48067 },
        // 	{ latitude: 23.08277, longitude: 113.30997 },
        //   ], //路線的存放做標(biāo)數(shù)組
        //   color: "#42b983", //路線顏色 #42b983 #E74C3C
        //   width: 3, //線的寬度
        // },
      ],
    };
  },
  onLoad() {
    this.getLocations();
  },
  onShow() {},
  methods: {
    func(e) {
      let map = uni.createMapContext("maps", this);
      map.moveToLocation() // 移動到當(dāng)前位置點
    },
    // 獲取地理位置
    getLocations() {
      const _self = this;
      uni.getLocation({
        type: "wgs84",
        geocode: true,
        success: function (res) {
          console.log(res);
          _self.curLocation = {
            latitude: res?.latitude,
            longitude: res?.longitude,
          };
        },
        fail: function (res) {
          console.log(res);
        },
      });
    },

    // 查詢公交線路
    async getRouteData(city, transitno) {
      const data = await api.routeInquiry(city, transitno);
      if (data && data.status === 0) {
        console.log(data.result);
        this.result = [...data.result];

        const cur_points = data?.result[0]?.list.map((item) => {
          return {
            latitude: item?.lat,
            longitude: item?.lng,
            station: item?.station,
          };
        });
        console.log("cur_points", cur_points);

        const maxLen = cur_points.length - 1;
        const cur_markers = [
          {
            iconPath: require("./imgs/start.png"),
            id: 0,
            latitude: cur_points[0]?.latitude,
            longitude: cur_points[0]?.longitude,
            width: 32,
            height: 32,
          },
          {
            iconPath: require("./imgs/end.png"),
            id: 1,
            latitude: cur_points[maxLen]?.latitude,
            longitude: cur_points[maxLen]?.longitude,
            width: 32,
            height: 32,
          },
        ];

        this.markers = cur_markers;
        this.polyline = [
          {
            points: cur_points, // 根據(jù)多個點形成線路， 只有兩個點那就是直線
            color: "#42b983", //路線顏色 #42b983 #E74C3C
            width: 5, //線的寬度
            dottedLine: true,
            arrowLine: true,
          },
        ];
        this.scale = 14;
      }
    },
    onChange(event) {
      this.transitno = event.detail.value;
    },
    onSerach(event) {
      console.log("onSerach", event.detail.value);
      this.getRouteData(this.city, event.detail.value);
    },
  },
};
</script>

到了這里，關(guān)于微信小程序，高德地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！