微信小程序---高德地图API

本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示。

微信小程序目前支持百度地图、高德地图、腾讯地图。用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应该是最准确的,毕竟本来就是做地图出生的。百度地图的精度目前较高德而言,还是要稍稍欠缺一点,但是他的附近商家那些要比高德好一点。而关于腾讯地图,暂时来说还是只能表示呵呵,希望越来越好吧。
1.既然本章是介绍微信小程序如何使用高德地图API,那么第一件事肯定是进入高德地图开放平台(https://lbs.amap.com/)。此处需要注册,登录。
2.完成登陆后,进入控制台,在左边侧边栏里点击 应用管理->我的应用-> 创建新应用,会生成一个key,这个key在后面将会用到。记住绑定服务选择 微信小程序
3.登录微信开发者平台,在服务器域名设置里将高德地图的域名设置好
在这里插入图片描述
4.在你的项目中新建一个目录libs,将amap-wx.js文件放入此目录里(amap-wx.js下载地址:https://lbs.amap.com/api/wx/download,解压出来会有两个文件,此处只需要一个),结果如下:
在这里插入图片描述
5.在libs目录下创建配置文件config.js,写入第二步获取的key,例如
在这里插入图片描述

高德api配置到这儿就结束了,以下是我调用高德实现定位的demo

JS部分:

var amapFile = require('../../libs/amap-wx.js');  //引入高德js
var config = require('../../libs/config.js');      //引用我们的配置文件
Page({
  data: {
    markers: [],
    latitude: '',
    longitude: '',
    textData: {}
  },
  onLoad: function () {
    var that = this;
    var key = config.Config.key;
    var myAmapFun = new amapFile.AMapWX({ key: key });
    myAmapFun.getRegeo({
      iconPath: "../../img/marker.png",
      iconWidth: 22,
      iconHeight: 32,
      success: function (data) {
        console.log(data);
        var marker = [{
          id: data[0].id,
          latitude: data[0].latitude,
          longitude: data[0].longitude,
          iconPath: data[0].iconPath,
          width: data[0].width,
          height: data[0].height
        }]
        that.setData({
          markers: marker
        });
        that.setData({
          latitude: data[0].latitude
        });
        that.setData({
          longitude: data[0].longitude
        });
        that.setData({
          textData: {
            name: data[0].name,
            desc: data[0].desc
          }
        })
      },
      fail: function (info) {
        // wx.showModal({title:info.errMsg})
      }
    })
  }
})

WXML部分:

<view class="map_container">
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"></map>  
</view>
<view class="map_text">
    <text class="h1">{{textData.name}}</text>
    <text>{{textData.desc}}</text>
</view>

WXSS部分:

.map_container{
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 0;
  right: 0;
}
.map{
  width: 100%;
  height: 100%;
}
.map_text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 80px;
  background: #fff;
  padding: 0 15px;
}
text{
  margin: 5px 0;
  display: block;
  font-size:12px;
}
.h1{
  margin: 15px 0;
  font-size:15px;
}

此页面大概长这样:
在这里插入图片描述

PS:
高德地图官方开发指南地址 https://lbs.amap.com/api/wx/guide/create-project/config-project
我的小程序demo地址 https://github.com/Yxiaogg/vioShopstar star star

发布了71 篇原创文章 · 获赞 367 · 访问量 36万+
展开阅读全文

微信程序高德地图API路线规划

09-21

#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="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" show-location="true"></map> </view> <view class="text_box"> <view class="text">{{distance}}</view> <view class="text">{{cost}}</view> <view class="detail_button" bindtouchstart="goDetail">详情</view> </view> ``` #js代码# ``` var amapFile = require('../../utils/amap-wx.js'); var config = require('../../utils/config.js'); Page({ data: { markers: [{ iconPath: "../../img/mapicon_navi_s.png", id: 0, latitude:'', longitude:'', width: 23, height: 33 },{ iconPath: "../../img/mapicon_navi_e.png", id: 0, latitude:'', longitude:'', width: 24, height: 34 }], distance: '', cost: '', polyline: [] }, onLoad: function() { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({key: key}); myAmapFun.getDrivingRoute({ success: function(data){ origin: data[0].longitude,data[0].latitude; destination: data[1].longitude,data[1].latitude; var marker = [{ latitude: data[0].latitude, longitude: data[0].longitude }, { latitude: data[1].latitude, longitude: data[1].longitude } ] that.setData({ markers: marker[0], latitude: data[0].latitude, longitude: data[0].longitude }); that.setData({ markers: marker[1], latitude: data[1].latitude, longitude: data[1].longitude }); 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) + '元' }); } } }) }, 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' }) } }) ``` 怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!! 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览