精华内容
下载资源
问答
  • 微信小程序地图选点收藏Demo 本程序是用于测试微信小程序地图功能及与LeanCloud数据存储管理功能的Demo。 本程序目前未添加AppID无法进行真机调试,欢迎已经申请到资格的朋友测试反馈。 本程序数据管理功能基于...
  • 微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明。 https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后...
  • 针对微信小程序和百度地图的结合,便于使用微信小程序的时候定位到当前的位置,还有针对尝试微信小程序地图融合时候的坑,请多多探讨
  • 主要介绍了微信小程序地图导航功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序地图开发入门(一)

    万次阅读 2017-03-07 20:43:22
    如何获取AppID, 如何创建项目, 点击这里查看官网详情根目录下 app.js, app.json, app.wxss解释 2.1 app.js 小程序的逻辑 2.2 app.json小程序的公共设置 2.3 app.wxss 小程序的公共样式表 简单写个tab 看一下样式...

    如何获取AppID, 如何创建项目, 点击这里查看官网详情

    根目录下 app.js, app.json, app.wxss解释
    这里写图片描述

    2.1 app.js 小程序的逻辑
    2.2 app.json小程序的公共设置
    2.3 app.wxss 小程序的公共样式表

    在app.json 配置个tab ( 类似于iOS tabbar)

    {
      "pages":[
         // 文件所在目录结构
         // index.js logs.js setup.js
        "pages/index/index",
        "pages/logs/logs",
        "pages/setup/setup"
      ],
      // 整个的window
      "window":{
        // 设置导航栏样式
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "夏小天",
        "navigationBarTextStyle":"black"
      },
      // tabbar对象
      "tabBar": {
      "color": "#dddddd",
      "selectedColor": "#1296db",
      "borderStyle": "yellow",
      "backgroundColor": "#ffffff",
      // 这里是个 .js数组
      "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "pages/images/icon3.png",
      "selectedIconPath": "pages/images/icon3.png"
      },
      {
      "pagePath": "pages/logs/logs",
      "text": "搜索",
      "iconPath": "pages/images/icon1.png",
      "selectedIconPath": "pages/images/icon1.png"
      },
      {
      "pagePath": "pages/setup/setup",
      "text": "设置",
      "iconPath": "pages/images/icon2.png",
      "selectedIconPath": "pages/images/icon2.png"
      }]}
    }

    一个页面包含的文件结构包含四个文件 .js文件.json文件 .wxml文件 wuss文件(类似于想要布局出iOS中的一个界面需要view model controller 协同工作)

    .js文件 功能类似于 iOS中Controller的作用 起到协同的作用, 也就是页面的逻辑
    .json 页面配置 比如我想要配置一下logs界面的导航栏文字
    .wxml 页面结构 (也就是有view btn等控件)
    .wxss 页面样式表(可以配置页面控件的位置, 颜色, 圆角等等属性)

    接下来用地图控件写一个简单界面

    .js 进行网络请求, 解析数据, 重新赋值data

    // 声明一个数组数组
    var dataArray = new Array()
    Page({
    
      data: {  
      // 标注的数组, 这个markers最终会在 .wxml中直接被使用, 初始为空, 后面会通过setData方法对他进行赋值.
      markers: [],
      // 地图上控件数组
      controls: [{
          // id号 方便找到是哪个控件
          id: 2000,
          // 图片路径
          iconPath: '/pages/images/tuijian.png',
          // 相对于地图的位置
          position: {
            left: 375 - 120,
            top: 50,
            width: 100,
            height: 40
          },
          // 是否可以点击
          clickable: true
        }]
      },
      // header: {'content-type': 'application/json'}
      onLoad: function () {
        var that = this
        // 调用网络请求, 请求停车场数据
        // list: [{ header: '今日热闻' }].concat(res.data.stories)
        // 进行一个网络请求
       wx.request({
         url: '',
         data: {},
         method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
         header: { 'content-type': 'application/json' }, // 设置请求的 header
         success: function(res){
           // success
          dataArray = res.data // 数据数组
          var markers = new Array()
          for (var i = 0; i < dataArray.length; i ++)
          {
            var dic = dataArray[i]
            // console.log(dic.coordinateAmap) // 得到高德经纬度坐标点字符串
            // 声明一个对象, 用于放置markers的一些参数, 就是iOS中类或者结构体
            var info = 
            {
                iconPath: "",
                id: 0,
                latitude: 31.237524,
                longitude: 121.5128895,
                width: 25,
                height: 25,
                name: ""
            };
            info.id = i
            info.width = 25
            info.height = 25
            // 通过 , 号分割字符串
            var arrLongLa = new Array()
            arrLongLa = dic.coordinateAmap.split(",")
            var longitude = arrLongLa[0]
            var latitude = arrLongLa[1]
            // 赋值相关信息
            info.latitude = latitude
            info.longitude = longitude
            info.name = dic.address
            // 状态判断
            if (dic.status == "空")
            {
              info.iconPath = "/pages/images/markers_icon3.png"
            }else if (dic.status == "忙") {
              info.iconPath = "/pages/images/markers_icon1.png"
            }else if (dic.status == "满") {
              info.iconPath = "/pages/images/markers_icon2.png"
            }else if (dic.status == "关") {
            }else {
              info.iconPath = "/pages/images/markers_icon5.png"
              }
              // 添加对象到数组
              markers.push(info)
            }
            console.log(markers)
            // 执行setData, 对markers进行赋值, 之后在 .wxml中引用
            that.setData(
              {markers: markers}
            )
         },
         fail: function() {
           // fail
         },
         complete: function() {
           // complete
         }
       })
      },
      // 地图相关动作的几个方法
      regionchange(e) {
        console.log(e.type)
      },
      // markers的点击事件
      markertap(e) {
        // 点击相应的坐标点取出相应的信息
        console.log(dataArray[e.markerId])
        console.log(e.markerId)
      },
      // control的点击事件
      controltap(e) {
        console.log(e.controlId)
      },
    })

    .json文件页面配置

    {
        "navigationBarTitleText": "logs"
    }

    这里写图片描述

    .wxml文件 页面UI

    <map id="map" longitude="121.5128895" latitude="31.237524" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 578px;">
    </map>

    .wxss 配置位置

    这篇没有使用这个文件, 因为基于地图操作

    今天这篇大致 布局了一个如下如所示的界面
    这里写图片描述

    Good! 工作流程不太明白的可以评论, 我能解答的 一定抽空回答!

    展开全文
  • 主要介绍了微信小程序中进行地图导航功能的实现方法,需要的朋友可以参考下
  • 主要介绍了微信小程序地图(map)组件点击(tap)获取经纬度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近在开发微信小程序中,无意中遇到一个问题,就是地图显示电子围栏,但是后端返回的值不满足它小程序给的组件的要求的数据,这时候需要迭代微信请求所返回的数据,找出需要的数据。 重点:这里拿区域举例:...

    最近在开发微信小程序中,无意中遇到一个问题,就是地图显示电子围栏,但是后端返回的值不满足它小程序给的组件的要求的数据,这时候需要迭代微信请求所返回的数据,找出需要的数据。

    重点:这里拿区域举例:polygons有points、 strokeWidth、strokeColor、fillColor等属性,但是核心还是其中的points,其中包含一个个经纬度坐标,但是如果返回的值中含有多个区域,该怎么办呢?

    小程序提供了setData方法,只要返回数据满足polygons要求就行,即其中的定义的变量接收return的值即可(return 返回的要求必须满足格式,恶心心,搞人心态)
    话不多说上代码:

    //进行骑行区域查找,根据经纬度查询附近的骑行区域
    function finddrivingArea(that, log, lat) {
      //请求后端数据
      wx.request({
        url: "http://localhost:8084/get/drivingAreas",
        method: 'GET',
        data: {
          longitude: log,
          latitude: lat,
        },
        success: function (res) {
          console.log(res)
         //console.log(res)
          //函数式编程,将每个GeoResult中的单词数据迭代出来
          var object1={"points":null, strokeWidth:2, strokeColor:"#FF000010",fillColor:"#FF000020"};
          const spolygons = res.data.content.map((reslut) => {
    
            var  polygon1 =JSON.stringify(reslut.content.geoJsonPolygon) 
            var  polygon2=reslut.content.geoJsonPolygon;
            
            var points=[]
            console.log('polygon1 '+polygon1)
            console.log('polygon.points '+JSON.stringify(polygon2.points))
            console.log('polygon.points.length '+polygon2.points.length)
            polygon2.points.forEach(element=>{
                var temp={}
                temp['longitude']=element.x;
                temp['latitude']=element.y;
                points.push(temp);
            });
            console.log(points)
            return {//返回 polygons所需要的数据格式
                points:points,
                strokeWidth:2,
                strokeColor:"#FF000010",
                fillColor:"#FF000020"
            };
          });
          // 修改data里面的polygons
          that.setData({
            lat: lat,
            log: log,
            polygons:spolygons
          });
        }
      })
    }
    

    效果如下:
    在这里插入图片描述

    展开全文
  • 微信小程序开发demo-地图定位wx.getLocation接口,测试时获取的经纬度一直不变 版本信息: 微信web开发者工具 v0.10.101100
  • 微信小程序地图定位Demo,使用微信内置地图查看API定位,调用应用实例的方法获取全局数据,运行实例后,若手机上打开有GPS功能,则会自动在地图上定位至自己的位置,很多Android中的应用或微信小程序应用,都会默认...
  • 微信小程序地图聚合示例代码,运用分格子算法,可聚合2w+的坐标点,具体说明请移步至我的博客https://blog.csdn.net/zw21544182/article/details/106048945
  • 我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的, ...
  • 微信小程序 使用腾讯地图SDK详解及实现步骤  近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下!  使用起来非常简单,就是一些功能还有待完善。  官方文档:...
  • 小程序地图采用微信小程序提供的map组件;周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。此代码提供小程序map搜索/定位/检索/天气/路线规划
  • 微信小程序地图map使用demoMapDemo-master.zip
  • 微信小程序获取当前位置 地图定位导航-详细代码 介绍说明https://blog.csdn.net/guochanof/article/details/90130871
  • 小程序 地图 自定义组件 底栏等示例 简单实用 wx-component 微信小程序自定义组件开发
  • 2.1 app.js 小程序的逻辑  2.2 app.json小程序的公共设置  2.3 app.wxss 小程序的公共样式表 在app.json 配置个tab ( 类似于iOS tabbar)   { "pages":[ // 文件所在目录结构 // index.js logs.js setup.js ...
  • 最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个...

      最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个过程中,用到了微信小程序的组件map和腾讯地图sdk,接下来主要对微信小程序的地图开发进行总结

     

    一、微信小程序地图组件

      为了方便微信小程序使用地图的相关功能,微信小程序为我们提供了map组件,通过这个组件,我们可以很简单的引入地图,并且还可以进行个性化地图的开发

    1、map组件

      微信小程序提供的地图组件,使用该组件只需要在wxml文件中加入下面的代码

    <map id="map" longitude="113.324520" latitude="23.099994" scale="14" style="width: 100%; height: 300px;"></map>

      上面这个例子中,我们只是简单的为该组件传入经纬度信息,并且设置缩放级别,当然,map组件还包括以下一些常用的属性

    属性类型说明是否必填
    longitudenumber中心经度
    latitudenumber中心纬度
    scalenumber缩放级别,取值范围为3-20
    markersArray.<marker>标记点
    polylineArray.<polyline>路线
    include-pointsArray.<point>缩放视野以包含所有给定的坐标点
    enable-trafficboolean是否开启实时路况
    bindregionchangeeventhandle视野发生变化时触发
    bindpoitapeventhandle点击地图poi点时触发

      其中,longitude和latitude这两个属性是必须填写的,如果没有填写,地图将无法正常显示,除了上面的属性之外,还有很多其它属性,其它属性请前往微信小程序官方文档进行查看

    2、map组件常用的属性介绍

    (1)longitude和latitude属性

      一般来说,我们需要设置地图的中心经纬度地图才能够正常显示,如果我们传入的是起点经纬度srcLat和srcLng,终点经纬度dstLat和dstLng,如果想要得到其中心坐标,可以通过如下的计算得到:

      centerLat = (srcLat + dstLat) / 2

      centerLng = (srcLng + dstLng) / 2

      通过以下简单的计算,就可以设置出地图的中心经纬度

    (2)markers属性

      在很多情况下,我们经常需要在地图上添加一些标记点,比如我们希望插件中指定的起点和终点都能够用自定义的图标进行表示,这个时候就可以用到markers属性啦

    Page({
      data: {
        markers: [{
          iconPath: "/resources/start.png",
          id: 0,
          latitude: srcLat,
          longitude: srcLng,
          width: 50,
          height: 50
        },
        {
          iconPath: "/resources/end.png",
          id: 0,
          latitude: dstLat,
          longitude: dstLng,
          width: 50,
          height: 50
        }]
    })

    (3)polyline属性

      polyline属性主要指定一系列坐标点,当我们设置了这些坐标点之后,将会从这些坐标点的第一个坐标点连线连到最后一个坐标点,当我们需要在地图上显示起点和终点之间的路线时,就可以用polyline属性进行设置

    Page({
      data: {
        polyline: [{
          points: [{
            longitude: 113.3245211,
            latitude: 23.10229
          }, {
            longitude: 113.324520,
            latitude: 23.21229
          }],
          color:"#FF0000DD",
          width: 2,
          dottedLine: true
        }]
    })

      关于polyline属性的具体属性介绍,可以查看微信小程序官方文档

    3、地图相关的API

      为了更好的使用地图的功能,微信小程序也是为我们提供了关于操作地图的相关API

      (1)wx.createMapContext(string mapId, Object this)

        创建map上下文MapContext 对象

      (2)MapContext.getCenterLocation(Object object)

        获取当前地图中心的经纬度

      (3)MapContext.getRegion(Object object)

        获取当前地图的视野范围

      (4)MapContext.getScale(Object object)

        获取当前地图的缩放级别

      (5)MapContext.includePoints(Object object)

        缩放视野展示所有经纬度

      (6)MapContext.moveToLocation()

        将地图中心移动到当前定位点

      (7)MapContext.translateMarker(Object object)

        平移marker,带动画

      使用上面的这些API,可以方便我们对map组件进行一些操作,下面来看个简单的例子

    <map id="myMap" show-location />
    
    <button type="primary" bindtap="getCenterLocation">获取位置</button>

      当点击获取位置时,我们可以通过相关的API进行获取当前的中心位置

    Page({
      onReady: function (e) {
        // 使用 wx.createMapContext 获取 map 上下文
        this.mapCtx = wx.createMapContext('myMap')
      },
      getCenterLocation: function () {
        this.mapCtx.getCenterLocation({
          success: function(res){
            console.log(res.longitude)
            console.log(res.latitude)
          }
        })
      }
    })

    4、使用位置服务相关的API

      在进行地图开发的时候,我们经常需要使用内置软件,高德地图,腾讯地图这些进行导航,这个时候可以使用相关的位置服务API

      (1)wx.openLocation(Object object)

        使用微信内置地图查看位置

      (2)wx.getLocation(Object object)

        获取当前的地理位置、速度

      (3)wx.chooseLocation(Object object)

        打开地图选择位置

      当我们指定一个终点位置,然后希望能够使用内置地图软件进行导航时,可以这样实现

    wx.openLocation({
         latitude: dstLat,
         longitude: dstLng,
         name: '终点名称'
    })

     5、使用map组件的一些问题

      map组件提供了很多地图的相关功能,但是使用map组件可能会遇到下面这些问题

      (1)map组件及微信小程序的API无法提供路线规划,地址转换等功能

       可以使用腾讯地图sdk,高德地图sdk,百度地图sdk等进行开发,比如腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品,通过使用这些服务,再配合map组件,可以开发出具有各种各样功能的地图

      (2)map组件的层级问题

        map组件的层级被设置为最高,不能通过z-index进行设置,因此使用map组件可能会遮住一些文字图片等内容,可以通过cover-view进行解决,将文字和图片内容嵌套在cover-view中,但是cover-view只能嵌套cover-view和cover-image

     

    二、在微信小程序中使用腾讯地图服务

      虽然map组件使我们可以很方便的使用地图,但是map组件只提供了最基本的地图显示功能,同时,微信小程序提供的关于地图的API也只是提供了一些简单的功能,在实际中无法满足我们的各种需求,如果需要使用到路线规划,距离计算等功能,我们可以在微信小程序中接入腾讯地图,高德地图,百度地图等服务,再结合map组件,去实现我们需要的功能

      下面以腾讯地图为例来介绍如何在微信小程序中使用腾讯地图服务

    1、密钥的申请以及域名的设置

      在微信小程序中使用腾讯地图服务大致需要进行如下几个过程:

      (1)申请开发者密钥

        

        这里需要填写Key的名称,名称可以根据实际项目应用来命名,申请成功后,会生成一串开发者密钥

      (2)开通webserviceAPI服务

        a、点击右上角的控制台

        b、选择key管理

        c、进入设置,勾选webserviceAPI,点击保存

      (3)域名的配置

        上面的两个步骤都是在腾讯位置服务平台上进行的操作,要进行域名的配置,还需要登录微信公众平台进行域名的配置

        在开发小程序时,我们都会使用自己的APPID进行开发,只有配置了相关的域名,在请求时才能向指定的域名发送请求

        在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

      (4)下载微信小程序JavaScriptSDK

      如果完成了上面几个步骤,我们就可以在微信小程序中使用腾讯地图服务啦,在微信小程序中新建一个项目,写入APPID,记得这个APPID需要在微信公众平台中进行了域名的配置,不然会报错

    2、实现路线规划

      下面举一个简单的小例子,给定起点和终点经纬度,计算出起点和终点之间的路线

      首先,需要引入我们刚才下载的JavaScriptSDK

    // 引入SDK核心类
    var QQMapWX = require('xxx/qqmap-wx.js');

      进行API核心类的实例化

    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
        key: '开发密钥(key)' // 必填
    });

      接着,我们需要通过调用路线规划的接口direction获取路线,direction接口可以提供驾车、骑行、步行、公交等路线规划功能

      direction接口传入的参数如下

      (1)mode

        String,路线规划选择,可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行)、'transit'(公交),默认:'driving'

      (2)from

        String格式:lat<纬度>,lng<经度>(例:from: '39.984060,116.307520')

        Object格式:{latitude: 纬度,longitude: 经度}(例:from: { latitude: 39.984060,longitude: 116.307520})

      (3)to

        String格式:lat<纬度>,lng<经度>(例:location: '39.984060,116.307520')

        Object格式:{latitude: 纬度,longitude: 经度}(例:to: { latitude: 39.984060,longitude: 116.307520})

      下面给一个根据起点和终点实现路线规划的例子

    <!--wxml-->
    <map id="myMap" style="width: 100%; height: 300px;"
    longitude="{{longitude}}" latitude="{{latitude}}" scale='16' polyline="{{polyline}}" show-location></map>
    
    <!--js-->
    // 引入SDK核心类
    var QQMapWX = require('xxx/qqmap-wx.js');
     
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
        key: '开发密钥(key)' // 必填
    });
    Page({
        data: {
            srcLat: '起点经度',
            srcLng: '起点纬度',
            dstLat: '终点经度',
            dstLng: '起点纬度',
            latitude: '',
            longitude: ''
        },
        onLoad() {
            var _this = this;
            //调用距离计算接口
            qqmapsdk.direction({
                mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
          //from参数不填默认当前地址
              from: {
                  latitude: _this.data.srcLat,
                  longitude: _this.data.srcLng
              },
              to: {
                  latitude: _this.data.dstLat,
                  longitude: _this.data.dstLng
              }, 
              success: function (res) {
                  console.log(res);
                  var ret = res;
                  var coors = ret.result.routes[0].polyline, pl = [];
                  //坐标解压(返回的点串坐标,通过前向差分进行压缩)
                  var kr = 1000000;
                  for (var i = 2; i < coors.length; i++) {
                      coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
                  }
                  //将解压后的坐标放入点串数组pl中
                  for (var i = 0; i < coors.length; i += 2) {
                      pl.push({ latitude: coors[i], longitude: coors[i + 1] })
                  }
                  console.log(pl)
                  //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
                  _this.setData({
                      latitude:pl[0].latitude,
                      longitude:pl[0].longitude,
                      polyline: [{
                          points: pl,
                          color: '#FF0000DD',
                          width: 4
                      }]
                   })
              },
              fail: function (error) {
                  console.error(error);
              },
              complete: function (res) {
                  console.log(res);
               }
           });
            
        }
    })    

      腾讯地图服务还提供了距离计算等其它功能,具体功能可以查看腾讯地图服务官方文档

     

      刚开始接触微信小程序,还有很多东西需要学习,大家一起交流学习呀

     

     

    转载于:https://www.cnblogs.com/Yellow-ice/p/11133283.html

    展开全文
  • 微信小程序 · 美食地图模板 美食地图小程序是一个在小程序中借助 LBS 地图功能实现获取身边美食的小程序。 如需帮助,请加QQ群 1058152661 产品描述 「美食地图」小程序是一个面向 Airbnb 房东、美食博主、朋友圈...
  • 地图组件顾名思义就是显示我们的地图的,通过经纬度,将位置在地图上显示出来;这里提几个常用属性,更多的可以到官网进行查阅。...官网demo地址:打开小程序map组件官网地址,找到 点击在开发者工具中预

    地图组件顾名思义就是显示我们的地图的,通过经纬度,将位置在地图上显示出来;这里提几个常用属性,更多的可以到官网进行查阅。

    属性

    longitude:number类型,经度坐标

    latitude:number类型,纬度坐标

    markers:Array.<marker值>数组类型,标记点,可以有多个

    show-location:boolean类型,显示带有方向的当前定位点

    因为坐标点不好弄,所以我们通过官网demo进行演示。

    官网demo地址:打开小程序map组件官网地址,找到在这里插入图片描述
    点击在开发者工具中预览效果,会自动加载到小程序开发工具中。

    代码分析

    导入官网demo之后,我们可以看到index.wxml、index.js、index.wxss三个文件。
    在这里插入图片描述
    这个样子的一个工程目录,但是这里还是贴一下代码,并添加了相关注释。

    index.js文件代码

    Page({
      data: {
        /**
         * 默认中心值
         */
        latitude: 23.099994,
        longitude: 113.324520,
        /**
         * markers标记点数组
         */
        markers: [{
          id: 1,
          latitude: 23.099994,
          longitude: 113.324520,
          name: 'T.I.T 创意园',
          iconPath: '/image/location.png'
        }],
        /**
         * covers标记点数组  即将被删除,所以不做过多介绍
         */
        covers: [{
          latitude: 23.099994,
          longitude: 113.344520,
          iconPath: '/image/location.png'
        }, {
          latitude: 23.099994,
          longitude: 113.304520,
          iconPath: '/image/location.png'
        }]
      },
      onReady: function (e) {
        /**
         * 获取上下文对象
         */
        this.mapCtx = wx.createMapContext('myMap')
      },
      /**
       * 获取当前中心点位置
       * 获取当前中心点经纬度
       */
      getCenterLocation: function () {
        this.mapCtx.getCenterLocation({
          success: function(res){
            console.log(res.longitude)
            console.log(res.latitude)
          }
        })
      },
      /**
       * 移动位置
       * 将定位点移动到指定位置
       */
      moveToLocation: function () {
        this.mapCtx.moveToLocation()
      },
      /**
       * 移动标注
       */
      translateMarker: function() {
        this.mapCtx.translateMarker({
          markerId: 1,
          autoRotate: true,
          duration: 1000,
          destination: {
            latitude:23.10229,
            longitude:113.3345211,
          },
          animationEnd() {
            console.log('animation end')
          }
        })
      },
      /**
       * 缩放视野展示所有经纬度
       */
      includePoints: function() {
        this.mapCtx.includePoints({
          padding: [10],
          points: [{
            latitude:23.10229,
            longitude:113.3345211,
          }, {
            latitude:23.00229,
            longitude:113.3345211,
          }]
        })
      }
    })
    
    

    index.wxml文件代码

    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          id="myMap"
          style="width: 100%; height: 300px;"
          latitude="{{latitude}}"
          longitude="{{longitude}}"
          markers="{{markers}}"
          covers="{{covers}}"
          show-location
        ></map>
      </view>
      <view class="btn-area">
       <!-- 获取中心点位置事件监听 -->
        <button bindtap="getCenterLocation" class="page-body-button" type="primary">获取位置</button>
        <!-- 移动到指定位置事件监听 -->
        <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
        <!-- 移动标注位置事件监听 -->
        <button bindtap="translateMarker" class="page-body-button" type="primary">移动标注</button>
        <!-- 缩放视野展示所有经纬度事件监听 -->
        <button bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button>
      </view>
    </view>
    
    

    主要的就是这两个文件,wxss文件就一个样式,并且还没有什么特别的,所以就不贴上来了。

    我们运行模拟器看一下效果图:
    在这里插入图片描述
    看地图中的绿色标记就可以看到data中基础经纬度定位的位置,然后我们来操作一下四个事件监听。

    1.获取位置,点击获取位置可以看到控制台有了对应输出:

    在这里插入图片描述
    2.移动位置,点击移动位置可以看到地图中心点直接move到了当前的经纬度地址,为了方便观看移动之后我们再次点击获取:

    在这里插入图片描述
    3.移动标记,我们在data中定义了移动标记的位置,当我们点击移动标记时,标记会移动到data中指定经纬度的位置:

    /**
       * 移动标注
       */
      translateMarker: function() {
        this.mapCtx.translateMarker({
          markerId: 1,
          autoRotate: true,
          duration: 1000,
          destination: {
            latitude:23.10229,
            longitude:113.3345211,
            iconPath: '/image/location.png'
          },
          animationEnd() {
            console.log('animation end')
          }
        })
      },
    

    在控制台打印出animation end之后,我们再次点击获取位置,可以获取到移动标记之后标记点的位置:

    在这里插入图片描述
    4.缩放视野展示所有经纬度,这个方法其实没什么说的,就是把点的集合缩放到一个可见的视野之内,这里就不做过多的显示了,自己进行操作和尝试就可以了。

    其实地图组件只要按照官方文档给的方法进行操作就可以很好的展示出来,重要的是属性的操作,属性的值,以及取值区间等等,这里就贴一部分,更多的到小程序map组件官网地址进行查看
    在这里插入图片描述
    另外事件监听的四个方法,在小程序的api里面也都包含的有,详情也可以查阅小程序API文档
    在这里插入图片描述
    地图组件的介绍就这么多了~

    展开全文
  • 共享单车微信小程序源码,前端微信开发者工具的代码和后端java代码
  • 基于微信小程序的校园地图设计与开发.pdf
  • 闲来无事写一篇使用高德地图微信小程序SDK开发应用的实例。 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标。 当然在UI上...
  • 有些时候,在开发微信小程序的时候,需要一个功能,就是让用户提交某个位置的信息。比如发布门店信息的时候需要自己上传自己的门店位置,单单使用文字来描述信息,可能不够直观,这个时候就需要我们使用地图定位的...
  • 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。 工程结构 可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。 项目中有了一些示例,已经有了获取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,721
精华内容 5,488
关键字:

微信小程序地图开发

微信小程序 订阅