当前位置： >
微信小程序开发mapdemo，地图导航，标记标注，地图定位实例源码
时间： 11:53 来源：互联网 作者：源码搜藏 浏览：
源码类别：微信小程序
源码大小：未知
编码格式：gbk
授权方式：免费源码
运行环境：php+mysql
官方网址：暂无
如需付费技术支持请联系客服
欢迎加入QQ群讨论学习
微信-weapp-mapdemo
微信小程序开发mapdemo，地图导航，标记标注
版本信息：微信Web开发者工具&v0.15.152900
由源码搜藏网整理,转载请注明出处微信小程序开发之map地图实现教程
转载 & & 作者：何东_hd
相信大家现在都知道微信小程序吧，下面这篇文章主要给大家介绍了微信小程序开发之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属性太多，先看一下：
如果用到地图，基本上所有属性都会用到。
下面一一看一下，我们先看效果图吧，先看真相：
这里我只用了一个markers，就是定位当前位置的红色markers，用法如下：
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
_this.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
latitude: res.latitude,
longitude: res.longitude,
width: 50,
height: 50,
iconPath: "/assests/imgs/my.png",
title: "哪里"
circles: [{
latitude: res.latitude,
longitude: res.longitude,
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 3000,
strokeWidth: 1
这里加了circles，半径是3000米，具体的api可自行看。
接下来看看controls，控制层，在地图上显示控件，控件不随着地图移动，看API：
注意看示例图的右上角，有两个按钮，加减号，是控制地图scale的数值变化，动态缩放地图的，controls用法也很简单：
controls: [{
iconPath: '/assests/imgs/jian.png',
position: {
left: 320,
top: 100 - 50,
width: 20,
height: 20
clickable: true
iconPath: '/assests/imgs/jia.png',
position: {
left: 340,
top: 100 - 50,
width: 20,
height: 20
clickable: true
最后我们看一张gif图：
最后上一下具体代码：
&map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: {{view.Height}}"&&/map&
Height: 0,
scale: 13,
latitude: "",
longitude: "",
markers: [],
controls: [{
iconPath: '/assests/imgs/jian.png',
position: {
left: 320,
top: 100 - 50,
width: 20,
height: 20
clickable: true
iconPath: '/assests/imgs/jia.png',
position: {
left: 340,
top: 100 - 50,
width: 20,
height: 20
clickable: true
circles: []
onLoad: function () {
var _this =
wx.getSystemInfo({
success: function (res) {
//设置map高度，根据当前设备宽高满屏显示
_this.setData({
Height: res.windowHeight
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
_this.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
latitude: res.latitude,
longitude: res.longitude,
width: 50,
height: 50,
iconPath: "/assests/imgs/my.png",
title: "哪里"
circles: [{
latitude: res.latitude,
longitude: res.longitude,
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 3000,
strokeWidth: 1
regionchange(e) {
console.log("regionchange===" + e.type)
//点击merkers
markertap(e) {
console.log(e.markerId)
wx.showActionSheet({
itemList: ["A"],
success: function (res) {
console.log(res.tapIndex)
fail: function (res) {
console.log(res.errMsg)
//点击缩放按钮动态请求数据
controltap(e) {
var that =
console.log("scale===" + this.data.scale)
if (e.controlId === 1) {
// if (this.data.scale === 13) {
that.setData({
scale: --this.data.scale
// if (this.data.scale !== 13) {
that.setData({
scale: ++this.data.scale
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具拒绝访问 | www.ggdoc.com | 百度云加速
请打开cookies.
此网站 (www.ggdoc.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(41845d50ccc64364-ua98).
重新安装浏览器，或使用别的浏览器要求要完成的功能：
<span style="color: #.要完成的要点是城市定位。
<span style="color: #.就是切换城市。
首页我们先参照微信小程序开放的官方文档找到：
在这里我们可以找到”当前位置经纬度“
getLocation: function ()
　　var that = this wx.getLocation(
　　　　success: function (res) {
　　　　　　　　 console.log(res)
　　　　 that.setData({
　　　　　　 hasLocation: true,
　　　　　　 location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度
　　　　})
//将经纬度转换成城市名和街道地址，参见百度地图接口文档：http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding
onLoad: function (options) {
　　console.log('onLoad')
　　var that =
　　wx.getLocation({
　　　　success: function (res) {
　　　　　　wx.request({
　　　　　　　　url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=' + res.latitude + ',' + res.longitude + '&output=json&pois=1', data: { },
　　　　　　　　header: { 'Content-Type': 'application/json' },
　　　　　　　　success: function(ops) {
　　　　　　　　　　console.log(ops.data)
　　　　　　　　}
　　　　})
　　// console.log(res)
　　// that.setData({
　　// hasLocation: true,
　　// location: formatLocation(res.longitude, res.latitude)
这里用到微信小程序的文档里面有发起的是https请求
这里面有案例我就不多讲解：
上面的代码打印出来的数据是：
renderReverse&&renderReverse({"status":0,"result":{"location":{"lng":114.97,"lat":22.019},"formatted_address":"广东省深圳市福田区福华一路138-5","business":"购物公园,新洲,香蜜湖","addressComponent":{"country":"中国","country_code":0,"province":"广东省","city":"深圳市","district":"福田区","adcode":"440304","street":"福华一路","street_number":"138-5","direction":"附近","distance":"18"},"pois":[{"addr":"深圳市福田区福华一路138号","cp":" ","direction":"北","distance":"51","name":"深圳国际商会大厦","poiType":"房地产","point":{"x":114.98,"y":22.66},"tag":"房地产;写字楼","tel":"","uid":"9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"福华一路98号","cp":" ","direction":"南","distance":"60","name":"卓越大厦","poiType":"房地产","point":{"x":114.07,"y":22.773},"tag":"房地产;写字楼","tel":"","uid":"c7fb04bd8fb44d68fb0cad85","zip":""},{"addr":"深圳市福田区","cp":" ","direction":"西北","distance":"236","name":"购物公园","poiType":"购物","point":{"x":114.08,"y":22.97},"tag":"购物;购物中心","tel":"","uid":"0e082dd9db526730aecb66f9","zip":""},{"addr":"福华一路南侧","cp":" ","direction":"西北","distance":"123","name":"投行大厦","poiType":"房地产","point":{"x":114.68,"y":22.97},"tag":"房地产;写字楼","tel":"","uid":"b3a40a67bedbe","zip":""},{"addr":"深圳福田区国际商会大厦A座","cp":" ","direction":"东北","distance":"77","name":"深圳国际商会大厦A座","poiType":"房地产","point":{"x":114.07,"y":22.88},"tag":"房地产;写字楼","tel":"","uid":"108ed554a3f92","zip":""},{"addr":"福华一路88号","cp":" ","direction":"西","distance":"131","name":"中心商务大厦","poiType":"房地产","point":{"x":114.15,"y":22.21},"tag":"房地产;写字楼","tel":"","uid":"cac5fc76ddb96d8b","zip":""},{"addr":"深圳市福田区福华一路88号中心商务大厦首层","cp":" ","direction":"西","distance":"134","name":"招商银行(中央商务支行)","poiType":"金融","point":{"x":114.24,"y":22.439},"tag":"金融;银行","tel":"","uid":"c7fb04bd3d531f6bfa0cadef","zip":""},{"addr":"深圳福田中心区福华一路28号(投资大厦旁)","cp":" ","direction":"西","distance":"229","name":"深圳马哥孛罗好日子酒店","poiType":"酒店","point":{"x":114.11,"y":22.78},"tag":"酒店;星级酒店","tel":"","uid":"ceb804b23c8142","zip":""},{"addr":"福华一路208号购物公园B1层","cp":" ","direction":"西北","distance":"234","name":"永旺超市(购物公园店)","poiType":"购物","point":{"x":114.98,"y":22.726},"tag":"购物;超市","tel":"","uid":"c032af8dc85d1","zip":""},{"addr":"深圳市福田区深南大道4103号兴业银行大厦17-18层","cp":" ","direction":"西南","distance":"158","name":"深圳市公证处(一号路)","poiType":"政府机构","point":{"x":114.69,"y":22.44},"tag":"政府机构;公检法机构","tel":"","uid":"765bf8daf4efd08cb45f1ec0","zip":""}],"poiRegions":[],"sematic_description":"深圳国际商会大厦北51米","cityCode":340}})
你找到city传进去就可以了，
第二步切换城市：
在次找到我们的微信小程序的开发文档里面有
滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。
普通选择器：mode = selector
属性名类型默认值说明
mode为 selector 时，range 有效
mode为 selector 时，是数字，表示选择了 range 中的第几个，从0开始。
bindchange
EventHandle
value改变时触发change事件，event.detail = {value: value}
时间选择器：mode = time
属性名类型默认值说明
表示选中的时间，格式为"hh:mm"
表示有效时间范围的开始，字符串格式为"hh:mm"
表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange
EventHandle
value改变时触发change事件，event.detail = {value: value}
日期选择器：mode = date
属性名类型默认值说明
表示选中的日期，格式为"yyyy-MM-dd"
表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
有效值year,month,day，表示选择器的粒度
bindchange
EventHandle
value改变时触发change事件，event.detail = {value: value}
注意：开发工具暂时只支持mode = selector。
示例代码：
array: ['美国', '中国', '巴西', '日本'],
time: '12:01'
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
bindDateChange: function(e) {
this.setData({
date: e.detail.value
bindTimeChange: function(e) {
this.setData({
time: e.detail.value
&view class="fl"&
　　&text wx:if="{{ifture}}"&{{cityname}}&/text&
　　&text wx:else& {{array[index]}} &/text&
　　&!--&view class="add-address"&&/view&--&
　　&picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"&
　　&view class="add-address"&
　　切换城市
　　&/view&
　　&/picker&
上面讲的不好的请多多指点：本人只是抛砖引玉，希望有更好的方法请微我，本人不胜感激。。。。
阅读(...) 评论()求教一个关于微信小程序的map组件的技术问题_百度知道
求教一个关于微信小程序的map组件的技术问题
我有更好的答案
小程序是微信推出的一种新的公众号的形态不需要下载安装即可在微信中使用的应用小程序、订阅号、服务号、企业号是并行的体系微信小程序在微信开发中的位置微信小程序MINA框架-尽可能简单、高效的方式让开发者可以在微信中开发-具有原生APP体验的服务小程序为开发者提供了什么小程序提供了一个框架，微信称之为mina，这个框架主要分两个层面，视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML中的动态数据均来自对应Page的data，这个数据绑定是单向的，只有数据发生变化，视图才会做出相应的调整。这种模式，让开发者专注于事件处理上，改变对象状态，实现视图更新。为了方便以及限制开发者开发，微信自己定义了一系列的基础组件，就是视图层的组成单元（表单组件，媒体组件，导航等），组件自带一些功能与微信风格的样式，类似html标签。微信还提供了很多原生的微信api,用来调用微信内部提供的功能，以及一个微信小程序开发者工具。
采纳率：74%
为您推荐：
其他类似问题
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。