前言

小程序默认的map组件地图是腾讯地图，但是我们常常会遇到一些需求，让用户选择使用自己喜欢的地图，对于这些功能也是我们前端开发工程师的必要技能。

地址链接
1、高德地图，小程序sdk文档地址
2、高德地图，小程序sdk下载地址

微信小程序地图插件系列其他文章
微信小程序地图插件系列（二）：微信小程序使用百度地图

提示：以下是本篇文章正文内容，下面案例可供参考

效果展示

一、准备阶段

1、在高德开放平台注册成为开发者
2、申请开发者密钥（key）。
3、下载并解压高德地图微信小程序SDK

二、快速上手

1、创建一个小程序
2、创建一个map文件夹，并创建page页面
3、打开map.js文件，用下面的代码完全替换原代码。（注意：js文件中要使用自己的高德key）

// miniprogram/pages/gao_de/gao_de.js
var amapFile = require('../../libs/amap-wx.js');//如：../../libs/amap-wx.js
Page({/*** 页面的初始数据*/data: {markers: [{iconPath: "../../img/mapicon_navi_s.png",id: 0,latitude: 39.989643,longitude: 116.481028,width: 23,height: 33},{iconPath: "../../img/mapicon_navi_e.png",id: 0,latitude: 39.90816,longitude: 116.434446,width: 24,height: 34}],distance: '',cost: '',polyline: []},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;var myAmapFun = new amapFile.AMapWX({key:'你的高德key'});myAmapFun.getPoiAround({success: function(data){console.log(data)//成功回调},fail: function(info){//失败回调console.log(info)}})//获取自己所在地址的定位myAmapFun.getRegeo({success: function(data){//成功回调console.log('---------')console.log(data)},fail: function(info){//失败回调console.log(info)}})//获取定位地点天气内容myAmapFun.getWeather({success: function(data){console.log(data,'123')//成功回调},fail: function(info){//失败回调console.log(info)}})//路线myAmapFun.getDrivingRoute({origin: '116.481028,39.989643',destination: '116.434446,39.90816',success: function(data){var points = [];if(data.paths && data.paths[0] && data.paths[0].steps){var steps = data.paths[0].steps;for(var i = 0; i < steps.length; i++){var poLen = steps[i].polyline.split(';');for(var j = 0;j < poLen.length; j++){points.push({longitude: parseFloat(poLen[j].split(',')[0]),latitude: parseFloat(poLen[j].split(',')[1])})} }}that.setData({polyline: [{points: points,color: "#0091ff",width: 6}]});if(data.paths[0] && data.paths[0].distance){that.setData({distance: data.paths[0].distance + '米'});}if(data.taxi_cost){that.setData({cost: '打车约' + parseInt(data.taxi_cost) + '元'});}},fail: function(info){}})},goDetail: function(){wx.navigateTo({url: '../navigation_car_detail/navigation'})},goToCar: function (e) {wx.redirectTo({url: '../navigation_car/navigation'})},goToBus: function (e) {wx.redirectTo({url: '../navigation_bus/navigation'})},goToRide: function (e) {wx.redirectTo({url: '../navigation_ride/navigation'})},goToWalk: function (e) {wx.redirectTo({url: '../navigation_walk/navigation'})},})

4、打开pages/map/map.wxml文件，用下面代码完全替换

<view class="flex-style"><view class="flex-item active" bindtouchstart="goToCar">驾车</view><view class="flex-item" bindtouchstart="goToWalk">步行</view><view class="flex-item" bindtouchstart="goToBus">公交</view><view class="flex-item" bindtouchstart="goToRide">骑行</view>
</view>
<view class="map_box"><map id="navi_map" longitude="116.451028" latitude="39.949643" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
</view><view class="text_box"><view class="text">{{distance}}</view><view class="text">{{cost}}</view><view class="detail_button" bindtouchstart="goDetail">详情</view>
</view>

5、拷贝样式代码到 pages/index/index.wxss文件

.flex-style{display: -webkit-box;display: -webkit-flex;display: flex;
}
.flex-item{height: 35px; line-height: 35px;text-align: center;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1
}
.flex-item.active{color:#0091ff;
}
.map_box{position:absolute;top: 35px;bottom: 90px;left: 0px;right: 0px;
}
#navi_map{width: 100%;height: 100%;
}
.text_box{position:absolute;height: 90px;bottom: 0px;left: 0px;right: 0px;
}
.text_box .text{margin: 15px;
}
.detail_button{position:absolute;bottom: 30px;right: 10px;padding: 3px 5px;color: #fff;background: #0091ff;width:50px;text-align:center;border-radius:5px;
}

6、点击保存，他会出现下属提示

getLocation需要在app.json中声明permission

7、找到app.json文件，在配置上添加如下代码即可。

 "permission": {"scope.userLocation":{"desc": "点击确认"}},

这里请大家对应替换自己pages/map/map.js中的图片路径。以便于更直观的看到效果。

总结

就先入个门。想继续和我完成后续学习的同志们，请关注我。以便于我更新后能通知到您！！！

微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）相关推荐

微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...
uniapp-小程序发券插件-领券进入微信卡包
这两天有个需求,在小程序领券,然后该优惠券进入微信卡包. 官方文档:https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter5_3_1.sht ...
小甲鱼 OllyDbg 教程系列 (九) ：Delphi 程序逆向特点
小甲鱼 OllyDBG 使用教程:https://www.bilibili.com/video/av30969642?p=16 OD 实验(十二) - 对一个 Delphi 程序的逆向:https:/ ...
【地图自学系列】三、徒手拔取地图数据（数据获取篇）
徒手拔取地图数据(数据获取篇) 前言一.数据来源 --- OSM(开源地图) 二.操作步骤 1. 打开浏览器(Chrome),访问网址:[overpass-turbo](https://overpa ...
高德地图我的队伍查岗_详细测试高德地图的家人地图后我学会了画地为牢
详细测试高德地图的家人地图后我学会了画地为牢 2020-07-15 15:18:46 7点赞 33收藏 11评论创作立场声明:感觉这个地图功能,能够帮到大家,尤其是家里老人和孩子,不迷路防走丢. ...
android 高德地图移动卡顿_Xamarin.Forms Android使用高德地图SDK
Xamarin.Forms Android 高德演示https://www.zhihu.com/video/1243224001301958656 介绍本编文章分为2节,第1节是介绍高德地图SDK与 ...
vue 高德地图不同区域显示不同颜色_没想到高德地图还能这么用，简直是PPT图表神器！...
本文转自:公众号"旁门左道PPT" 作者:邵云蛟提到高德地图,相信咱们每一个人都不会陌生,日常用来导航,也可以用来打车,一次呼叫8种车型,非常方便: 但是,如果你把它仅仅当做一个 ...
react 逆地理高德地图_在react中使用原生的高德地图
1.使用react-create-app创建一个新的react项目 2.修改index.html,添加以下script引用: 3.创建一个组件文件MapDemo.js,内容如下 import Reac ...
高德地图api如何不显示logo_Python爬取高德地图POI数据获取「洗浴推拿指南」
学习交流群认识高德地图API 打开"高德开放平台",点击"开发文档",在"Web服务"下寻找并点击"搜索API". 我 ...
android高德地图后台运行,Android手把手教你集成高德地图
在上一篇博客上,和大家分享了如何在Android中集成高德定位以及定位的基本使用.今天我们就来看看高德地图在Android中如何使用吧. 同样,我将本篇博客的内容分为如下部分: (1)添加高德SDK ...

微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）

前言

效果展示

一、准备阶段

二、快速上手

总结

微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）相关推荐

最新文章

热门文章