• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序地图组件DEMO

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近在做一个地图相关的小程序,已经完工,这里和大家分享下

1、index.wxml

<view class='index-hd'>XX地图</view>

<map id="myMap" style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;"
latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location bindmarkertap="selectMarket" include-points="{{markers}}" bindmarkertap="toaddress">

</map>

非常简单的写法,没什么名堂

2、index.wxss

.index-hd {
  padding: 5rpx;
  text-align: center;
}

样式也很简单

3、index.js

重点和功能在这里边

Page({

    data: {
 
    latitude: 22.46770600000,//纬度
    longitude: 109.9233160000,//经度
    markers: [//markers参数配置
    
//项目开始
     {
        //iconPath:"../../resource/images/lgzy.png",
        id: 1,
        latitude: 28.4772780000,//纬度
        longitude:119.9528090000,//经度
        // alpha:0,
        callout:{
          content: "项目名称",
          bgColor:'#FF6600',//背景颜色
          color: '#FFFFFF',//文字颜色
          padding:5,//内容与边框边距
          display:'ALWAYS',
          textAlign:'center',//文本对齐
          borderRadius: 10,//圆角边框
          borderColor:'#FF6600',//边框颜色
          borderWidth: 2,//边框粗细
 
      },
 
//项目结束
    ],
    mapWidth:'',
    mapHeight:''
  },

//end data
//这个页面分享给其他好友显示的标题和图片
  onShareAppMessage: function () {
    return {
      title: '标题',
      imageUrl: '../../resource/images/sharemap.png'
    }
  },
  //点击markers,通过对应ID传参,执行跳转到目标页面
  toaddress:function(e){
    console.log(e)
    var id =e.markerId
    console.log(id)
      /*跳转到目标位置
   */
    //wx.openLocation({
    //  latitude: this.data.markers[id].latitude,
    //  longitude: this.data.markers[id].longitude,
    // })
    wx.navigateTo({
      //url: '../../pages/index/index',
      url: '../../pages/jump/index?id='+ id,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
 
  /**
   * 跳转到目标位置
   */
   /*
 getLocation:function(){
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        wx.openLocation({//使用微信内置地图查看位置。
          latitude: 31.0938140000,//要去的纬度-地址
          longitude: 121.5039390000,//要去的经度-地址
          name: "O'MALL华侨城商业中心",
          address: '华侨城商业中心'
        })
      }
    })
  },
*/
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var sy = wx.getSystemInfoSync(),
        mapWidth = sy.windowWidth*2,
        mapHeight = sy.windowHeight*2;
    this.setData({
      mapWidth:mapWidth,
      mapHeight:mapHeight
    })
       // text:"这是一个页面"
    imageSrc: '../../resource/images/default.jpg'
  },

  jumptoindex:function(){
    wx.navigateTo({
      url: '../../pages/index/index',
    })
  }//jumptoindex

})//page

4、效果图

5、参数说明

地图组件参数

参数名

参数类型

描述

longitude

Number

中心经度

latitude

Number

中心纬度

scale

Number

缩放级别,取值范围 5-18(默认16 number)

markers

Array

标记点

polyline

Array

路线

circle

Array

controls

Array

控件

include-points

Array

缩放视野以及所有给定的坐标点

circle

Boolean

show-location

EventHandle

显示带有方向的当前定位点

bindmarkertap

EventHandle

点击标记点时触发

bindcontroltap

EventHandle

点击控件时触发

bindregionchange

EventHandle

视野发生变化时触发

bindtap

EventHandle

点击地图时触发

markers参数

参数名

参数类型

必传

描述

id

Number

N

标记点id(marker事件回调会返回此id)

longitude

Number

Y

中心经度(浮点数,范围:-180~180)

latitude

Number

Y

中心纬度(浮点数,范围:-90~90)

title

String

N

标注点名

iconPath

String

Y

显示的图标(项目目录下的图片路径,支持相对路径写法,以‘/’开头,则表示相对小程序的根目录,也支持临时路径)

rotate

Number

N

旋转角度(顺时针旋转的角度,范围:0~360,默认0)

alpha

Number

N

标注的透明度(默认1,无透明)

width

Number

N

标注图标宽度(默认图标实际宽度)

height

Number

N

标注图标高度(默认图标实际高度)

callout

Object

N

自定义标注点上方的气泡窗口 ({content,color,fontSize,borderRadius,bgColor,padding,boxShadow,display})

label

Object

N

为标记点旁边增加标签({color,font Size,content,x,y},可识别换行符,x,y原点是marker对应的经纬度)


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
AICODER官方小程序和公众号上线了发布时间:2022-07-18
下一篇:
微信小程序输出Object,Object发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap