快捷搜索:

微信小程序

2019-11-17 15:13栏目:关于澳门金莎
TAG:

微信小程序 使用腾讯地图SDK详解及实现步骤

微信小程序实例-获取当前的地理位置、经纬度

微信小程序 wxapp地图 map:

 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下!

微信小程序官方文档

map

  使用起来非常简单,就是一些功能还有待完善。

属性名 类型 默认值 说明
longitude Number   中心经度
latitude Number   中心纬度
scale Number 1 缩放级别
markers Array   标记点
covers Array   覆盖物

  官方文档:

JS代码

标记点

步骤:

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: '示例小程序-获取当前地理位、速度',
  userInfo: {},
  hasLocation:false,
  location:{}
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  }),
   wx.getLocation( {
   success: function( res ) {
    console.log( res )
    that.setData( {
     hasLocation: true,
     location: {
      longitude: res.longitude,
      latitude: res.latitude
     }
    })
   }
  })
 }
})

标记点用于在地图上显示标记的位置,不能自定义图标和样式

  1. 申请开发者密钥(key):申请密匙
  2. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0
  3. 安全域名设置,需要在微信公众平台添加域名地址
  4. 小程序示例

index.wxml

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
name 标注点名 String  
desc 标注点详细描述 String  
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 onLoad: function () {
   // 实例化API核心类
   qqmapsdk = new QQMapWX({
     key: '申请的key'
   });
 },
 onShow: function () {
   // 调用接口
   qqmapsdk.search({
     keyword: '彩票',
     success: function (res) {
       console.log(res);
     },
     fail: function (res) {
       console.log(res);
     },
   complete: function (res) {
     console.log(res);
   }
 });
})
<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
  <!-- <text class="user-motto">{{motto}}n</text>-->
  <text>经度:{{location.longitude}}n</text>
  <text>纬度:{{location.latitude}}</text>
 </view>
</view>

覆盖物

结果效果图:

运行效果

覆盖物用于在地图上显示自定义图标,可自定义图标和样式

图片 1

图片 2

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法
rotate 旋转角度 Number 顺时针旋转的角度,范围 0 ~ 360,默认为 0

去购彩.png

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

5.核心类

您可能感兴趣的文章:

  • 微信小程序之获取当前位置经纬度以及地图显示详解
  • 微信小程序 地图定位简单实例
  • 微信小程序 地图(map)实例详解
  • 微信小程序 高德地图SDK详解及简单实例(源码下载)
  • 微信小程序 地图map详解及简单实例
  • 微信小程序 使用腾讯地图SDK详解及实现步骤
  • 微信小程序 wxapp地图 map详解
  • 微信小程序开发之map地图实现教程
  • 微信小程序 地图map实例详解
  • 微信小程序实现获取自己所处位置的经纬度坐标功能示例

标记点markers只能在初始化的时候设置,不支持动态更新。

5.1 地点搜索search(options:Object)

示例:

通过关键词keyword搜索周边poi,比如“酒店”“餐饮”“娱乐”“学校”等

<!-- map.wxml -->
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
// map.js
Page({
 data: {
  markers: [{
   latitude: 23.099994,
   longitude: 113.324520,
   name: 'T.I.T 创意园',
   desc: '我现在的位置'
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: '../images/car.png',
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: '../images/car.png',
   rotate: 90
  }]
 }
})

去购彩界面的实现:

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

5.1.1 buy.js

您可能感兴趣的文章:

  • 微信小程序之获取当前位置经纬度以及地图显示详解
  • 微信小程序 获取当前地理位置和经纬度实例代码
  • 微信小程序 地图定位简单实例
  • 微信小程序 地图(map)实例详解
  • 微信小程序 高德地图SDK详解及简单实例(源码下载)
  • 微信小程序 地图map详解及简单实例
  • 微信小程序 使用腾讯地图SDK详解及实现步骤
  • 微信小程序开发之map地图实现教程
  • 微信小程序 地图map实例详解
  • 微信小程序实现获取自己所处位置的经纬度坐标功能示例
// 引入腾讯地图SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var util = require("../../utils/util.js");
var qqmapsdk;
Page({
 data: {
  resData: []
 },
 onLoad: function (options) {
  // 实例化腾讯地图API核心类
  qqmapsdk = new QQMapWX({
   key: 'HPNBZ-B426V-CZQPP-UN4R6-QYOF2-MYFU3'//此处使用你自己申请的key
  });
 },
 onShow: function () {
  var that = this;
  // 腾讯地图调用接口
  qqmapsdk.search({
   keyword: '彩票',
   page_size: 20,
   success: function (res) {
    console.log(res);
    var resData = res.data;
    for (var i = 0; i < resData.length; i++) {
     resData[i]._distance = util.formatDistance(resData[i]._distance);//转换一下距离的格式
    }
    that.setData({resData: resData});
   },
   fail: function(res) {
    console.log(res);
   },
   complete: function(res) {
    console.log(res);
   }
  })
 }
})


// utils/util.js
/**
* 将距离格式化
* <1000m时 取整,没有小数点
* >1000m时 单位取km,一位小数点 
*/
function formatDistance(num) {
 if (num < 1000) {
  return num.toFixed(0) + 'm';
 } else if (num > 1000) {
  return (num / 1000).toFixed(1) + 'km';
 }
}

5.1.2 buy.wxml 主要样式采用weui

<view class="page">
<view wx:for="{{resData}}" wx:key="shop" class="page__bd">
 <view bindtap="navTo" data-item="{{item}}">
  <view class="weui-panel">
   <view class="weui-panel__bd">
    <view class="weui-media-box weui-media-box_text">
     <view class="weui-media-box__title weui-media-box__title_in-text">{{item.title}}</view>
     <view class="weui-media-box__desc">{{item.address}}</view>
     <view class="weui-media-box__info">
      <view class="weui-media-box__info__meta">电话:{{item.tel}}</view>
      <view class="weui-media-box__info__meta weui-media-box__info__meta_extra">距离:{{item._distance}}</view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
</view>

5.2 关键词输入提示getSuggestion(options:Object)

用于获取输入关键字的补完与提示,帮助用户快速输入。

示例:

// 调用接口
qqmapsdk.getSuggestion({
 keyword: '技术',
 success: function(res) {
   console.log(res); 
 },
 fail: function(res) {
   console.log(res);
 },
 complete: function(res) {
   console.log(res);
 }
});

5.3 距离计算calculateDistance(options:Object)

计算一个点到多点的步行、驾车距离。

示例:

// 调用接口
qqmapsdk.calculateDistance({
 mode: 'walking';//步行,驾车为'driving'
 to:[{
   latitude: 39.984060,
   longitude: 116.307520
 }, {
   latitude: 39.984572,
   longitude: 116.306339
 }],
 success: function(res) {
   console.log(res);
 },
 fail: function(res) {
   console.log(res);
 },
 complete: function(res) {
   console.log(res);
 }
});

5.4 另外还有以下功能,就不一一演示了。

  1. getCityList(options:Object):获取全国城市列表数据;
  2. getDistrictByCityId(options:Object):通过城市ID返回城市下的区县;
  3. reverseGeocoder(options:Object):用于获取输入关键字的补完与提示,帮助用户快速输入
  4. geocoder(options:Object):提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • 微信小程序 地图定位简单实例
  • 微信小程序 地图(map)实例详解
  • 微信小程序 高德地图SDK详解及简单实例(源码下载)
  • 微信小程序 地图map详解及简单实例
  • 微信小程序开发之map地图实现教程
  • 微信小程序 开发MAP(地图)实例详解
  • 微信小程序 地图map实例详解
  • 微信小程序之获取当前位置经纬度以及地图显示详解
  • 微信小程序实现打开内置地图功能【附源码下载】

版权声明:本文由澳门金莎娱乐发布于关于澳门金莎,转载请注明出处:微信小程序