微信小程序实现打开内置地图功能【附源码下载】

2024-10-23 07:06:15

本文实例讲述了微信小程序实现打开内置地图功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

index.wxml布局文件代码

<button type="default" bindtap="openMap">打开地图</button>

index.js逻辑文件代码

Page({
 openMap:function(){
  wx.getLocation({
   type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
   success: function(res){
    // success
    wx.openLocation({
     latitude: res.latitude, // 纬度，范围为-90~90，负数表示南纬
     longitude: res.longitude, // 经度，范围为-180~180，负数表示西经
     scale: 28, // 缩放比例
    })
   }
  })
 }
})

这里bindtap="openMap"绑定的openMap函数中调用wx.openLocation函数获取本机经纬度信息。

更多关于wx.openLocation函数详细介绍可参考官网 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html

3、源代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

微信小程序高德地图SDK详解及简单实例（源码下载）

微信小程序高德地图SDK: 简介微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍账号与Key的申请注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南最后更新时间: 2017年1月9日本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具按照微信小程序开发文档下载并安装微信小
微信小程序开发之map地图实现教程

前言微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy
微信小程序地图map详解及简单实例

微信小程序地图map 微信小程序map 地图属性名类型默认值说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 1 缩放级别 markers Array 标记点 covers Array 覆盖物标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式属性说明类型必填备注 latitude 纬度 Number 是浮点数,范围 -90 ~ 90 longitude 经度 Number 是
微信小程序之获取当前位置经纬度以及地图显示详解

最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增页面需要在app.json进行配置: "pages":[ "pages/index/index", "pages/location/location", "pages/logs/logs" ] 通过在视图层调用bindtap与逻辑
微信小程序地图map实例详解

微信小程序地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co
微信小程序使用腾讯地图SDK详解及实现步骤

微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥(key):申请密匙下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com
微信小程序开发MAP（地图）实例详解

微信小程序开发MAP(地图)实例详解在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo
微信小程序地图定位简单实例

微信小程序开发地图定位. 微信小程序刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.
微信小程序地图（map）实例详解

微信小程序地图(map)实例这里是小编对微信小程序地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下. 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图. markers中的rotate是图标的旋
微信小程序实现打开内置地图功能【附源码下载】

本文实例讲述了微信小程序实现打开内置地图功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <button type="default" bindtap="openMap">打开地图</button> index.js逻辑文件代码 Page({ openMap:function(){ wx.getLocation({ type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,
微信小程序省市区选择器实例详解(附源码下载)

微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu
微信小程序简洁登录页面的实现(附源码)

目录 1.上图 2.用户不存在 3.上代码 1.上图 2.用户不存在 3.上代码 3.1login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  <view class="v2"> <view class="dltext"
微信小程序天气预报功能实现(支持自动定位,附源码)

前言由于和风天气API的更新,之前写的那篇文章可能会出现版本不兼容的情况.所以更新了这个使用新版API的小程序. 效果图天气API获取这里我用的是和风天气的API,打开官网注册或者登陆你的账号进入控制台,选择应用管理,新建应用(应用版本选择免费开发版,key的类型选择 Web API) 创建成功后就可以看到待会要用到的 key了微信小程序后台域名配置登陆小程序后台,分别点击开发和开发设置点击修改,将我们要用到的 API的域名添加到request合法域名里面,htt
微信小程序 swiper制作tab切换实现附源码

微信小程序 swiper制作tab切换实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view
微信小程序实现打开并下载服务器上面的pdf文件到手机

谈一谈ios的bug: 关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看.所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧! 先看一下不兼容ios系统的下载柚子是怎么实现的吧: 首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件 //查看并下载 See_download() { wx.downloadF
微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 否则会弹出以下错误提示: 超链接实现跳转到小程序: demo.wxml <navigator target="miniProgram&quo
Python 写小游戏吃金币+打乒乓+滑雪(附源码)

目录 1.吃金币 2.打乒乓 3.滑雪 1.吃金币源码分享: import os import cfg import sys import pygame import random from modules import * '''游戏初始化''' def initGame(): # 初始化pygame, 设置展示窗口 pygame.init() screen = pygame.display.set_mode(cfg.SCREENSIZE) pygam
PHP：微信小程序微信支付服务端集成实例详解及源码下载

微信小程序微信支付服务端集理论上集成微信支付的全部工作可以在小程序端完成,因为小程序js有访问网络的能力,但是为了安全,不暴露敏感key,而且可以使用官方提供的现成php demo更省力,于是在服务端完成签名与发起请求,小程序端只做一个wx.requestPayment(OBJECT)接口的对接. 整体集成过程与JSAPI.APP类似,先统一下单,然后拿返回的结果来请求支付. 一共三步: 1.小程序端通过wx.login的返回的code换取openid 2.服务端向微信统一下单 3.小程序端
微信小程序地图导航功能实现完整源代码附效果图（推荐）

正文: 一:需求及效果图展示从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示坐标的附近街景,路线,或者打开外部地图. 二:源代码 <block wx:for="{{data_2}}" wx:key='index' wx:if="{{data_2.length}}"> <view style='margin-left:10rpx;'>订单号: {{item.order_num}}</view> &l

微信小程序实现打开内置地图功能【附源码下载】

相关推荐

随机推荐