精华内容
下载资源
问答
  • 微信小程序地图

    2017-12-22 16:16:53
    微信小程序地图定位dome,主要包含已有的一些接口使用说明
  • Page({ data: { latitude: 23.099994, longitude: 113.324520, markers: [{ id: 1, latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园' }], covers: [{ latitude: 23.099994, ...
  • 微信小程序地图选点收藏Demo 本程序是用于测试微信小程序地图功能及与LeanCloud数据存储管理功能的Demo。 本程序目前未添加AppID无法进行真机调试,欢迎已经申请到资格的朋友测试反馈。 本程序数据管理功能基于...
  • 微信小程序地图导航

    2017-12-11 19:38:33
    微信小程序地图导航 微信小程序地图导航微信小程序地图导航
  • 微信小程序地图Demo

    2016-12-16 10:58:43
    微信小程序地图
  • 本文实例为大家分享了微信小程序地图实现展示线路的具体代码,供大家参考,具体内容如下 效果图: 思路: 1、首先获取一系列的坐标点,然后将这些坐标从头到尾链接起来。(参考微信小程序地图组件polyline属性) 2...
  • 微信小程序地图制作

    2018-08-19 21:17:47
    微信小程序地图制作 小程序开发 地图制作,源码下载 ,
  • 微信小程序地图-源码

    2021-01-27 09:46:57
    微信小程序地图-源码
  • 主要介绍了微信小程序 地图map实例详解的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 地图定位简单实例的相关资料,并附实例代码及实现效果图,需要的朋友可以参考下
  • 微信小程序地图模板,搜索地址通过谷歌地图获取经纬度,然后通过必应地图跳转
  • 微信小程序地图导航代码,经测试,可正常使用。紫署布丁
  • 主要介绍了微信小程序 地图(map)实例详解的相关资料,这里对微信小程序地图API 进行了详细介绍并附示例代码和实现效果图,需要的朋友可以参考下
  • 微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   ...
  • 微信小程序地图导航,微信小程序地图导航,对初学者非常有用
  • 微信小程序地图demo

    2017-12-11 17:12:40
    微信小程序地图demo,可自定义气泡标签等,根据地理位置画出两点之间的线
  • 微信小程序 腾讯地图大头针定位,获取当前地址,地图移动选点,定位当前位置:...微信小程序地图搜索:https://blog.csdn.net/summer_ck/article/details/89472134 ...

    实现效果:根据楼盘名称实现地图定位、周边搜索;
    在这里插入图片描述
    代码:
    html

    <view class="mapinfo">
      <view class="mapbd">
        <map id="map" 
            longitude="{{longitude}}" 
            latitude="{{latitude}}" 
            scale="16" 
            enable-scroll="{{enablescroll}}"         
            markers="{{markers}}" /> 
      </view>
      <scroll-view class="mapbombox" scroll-x="{{true}}">
        <view class="mapiconbox" wx:for="{{mapiconlist}}" wx:key="index" data-txt="{{item.icontxt}}" bindtap="nearby_search">
          <image mode="widthFix" src="{{item.imgpath}}" class="mapicon" />
          <view class="mapicontxt">{{item.icontxt}}</view>
        </view>
      </scroll-view>
    </view>
    

    js:(需要下载地图sdk.js文件 官网下载地址https://lbs.qq.com/qqmap_wx_jssdk/index.html 以及 key

    // pages/mapinfo/mapinfo.js
    // 引入SDK核心类
    var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    var qqmapsdk;
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        latitude: 39.9167,
        longitude: 116.3833,
        mapheight: '600',
        enablescroll: true,
        selcity: '',
        markers: [{
          iconPath: "../../images/placeico.png",
          id: 0,
          latitude: 39.9167,
          longitude: 116.3833,
          width: 28,
          height: 40
        }],
        mapiconlist: [{
          imgpath: "../../images/map-bus.png",
          icontxt: "公交"
        }, {
          imgpath: "../../images/map-subway.png",
          icontxt: "地铁"
        }, {
          imgpath: "../../images/map-hospital.png",
          icontxt: "医院"
        }, {
          imgpath: "../../images/map-bank.png",
          icontxt: "银行"
        }, {
          imgpath: "../../images/map-shopping.png",
          icontxt: "购物"
        }, {
          imgpath: "../../images/map-food.png",
          icontxt: "餐饮"
        }, {
          imgpath: "../../images/map-school.png",
          icontxt: "学校"
        }, {
          imgpath: "../../images/map-hotel.png",
          icontxt: "酒店"
        }, {
          imgpath: "../../images/map-enter.png",
          icontxt: "娱乐"
        }]
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
          key: 'K7EBZ-DEH6F-YSOJA-NZSJL-WUT43-SLFBE'
        });
        this.getsuggest();
        wx.getSystemInfo({
          success: (res) => {
            this.setData({
              mapheight: res.windowHeight
            })
    
            // console.log(res.model)
            // console.log(res.pixelRatio)
            // console.log(res.windowWidth)
            console.log(this.data.mapheight);
            // console.log(res.language)
            // console.log(res.version)
            // console.log(res.platform)
          }
        })
      },
    
      getsuggest: function (e) {
        var _this = this;
        //调用关键词提示接口
        qqmapsdk.getSuggestion({
          //获取输入框值并设置keyword参数
          // keyword: e.detail.value, //用户输入的关键词,可设置固定值,如keyword:'KFC'
          keyword: '首尔甜城',
          // region: '上海', //设置城市名,限制关键词所示的地域范围,非必填参数
          page_size: 5,
          success: (res) => { //搜索成功后的回调
            // console.log(res);
            let sug = [];
            sug.push({ // 获取返回结果,放到sug数组中
              iconPath: "../../images/placeico.png",
              width: 28,
              height: 40,
              title: res.data[0].title,
              id: res.data[0].id,
              addr: res.data[0].address,
              city: res.data[0].city,
              district: res.data[0].district,
              latitude: res.data[0].location.lat,
              longitude: res.data[0].location.lng,
              callout: {
                content: res.data[0].title,
                color: '#fff',
                fontSize: 14,
                borderRadius: 5,
                display: 'none',
                bgColor: '#818080',
                borderColor: '#818080',
                textAlign: "center",
                padding: 10,
                // borderWidth: 1,
                // borderColor: "#CCC",
              }
            });
    
            this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
              latitude: sug[0].latitude,
              longitude: sug[0].longitude,
              markers: sug,
              selcity: res.data[0].district
            });
            console.log(res.data[0].district);
            // console.log(sug[0].latitude);
          },
          fail: function (error) {
            console.error(error + "失败");        
          },
          complete: function (res) {
            // console.log(res);
          }
        });
      },
    
      // 事件触发,调用接口
      nearby_search: function (e) {
        var _this = this;
        let keyword = e.currentTarget.dataset.txt;
        // console.log(e);
        // 调用接口
        qqmapsdk.search({
          keyword: keyword, //搜索关键词
          boundary: 'nearby(' + this.data.latitude + ',' + this.data.longitude + ', 1000)',
          region: this.data.selcity,
          // orderby: _distance, //支持按距离由近到远排序
          auto_extend: 0,
          page_size: 8,
          location: this.data.latitude + ',' + this.data.longitude, //设置周边搜索中心点
          success: (res) => { //搜索成功后的回调
            let mks = []
            for (let i = 0; i < res.data.length; i++) {
              mks.push({ // 获取返回结果,放到mks数组中
                title: res.data[i].title,
                id: res.data[i].id,
                latitude: res.data[i].location.lat,
                longitude: res.data[i].location.lng,
                iconPath: "../../images/placeico.png", //图标路径
                width: 28,
                height: 40,
                callout: {
                  content: res.data[i].title,
                  color: '#fff',
                  fontSize: 14,
                  borderRadius: 5,
                  display: 'none',
                  bgColor: '#818080',
                  borderColor: '#818080',
                  textAlign: "center",
                  padding: 10,
                  // borderWidth: 1,
                  // borderColor: "#CCC",
                }
              })
            }
            if (mks.length > 0) {
              this.setData({ //设置markers属性,将搜索结果显示在地图中
                markers: mks
              })
            } else {
              // console.log('kong');
              wx.showToast({
                title: "当前区域内未找到",
                icon: 'none',
              })
            }
            // console.log(res);
            // console.log(this.data.latitude + ',' + this.data.longitude);
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
          }
        });
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
    })
    

    css

    .mapinfo{
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      .mapbd {
        position: relative;
        width: 100%;
        height: 100vh;
        #map {
          width: 100%;
          height: 100%;
        }
      }
      .mapbombox{
        position: fixed;
        left: 0;
        bottom:0;
        width: 100%;
        height: 100rpx;    
        z-index:99;
        background:rgba(0,0,0,0.5);
        white-space: nowrap;
        .mapiconbox{
          position: relative;
          width: 100rpx;
          height: 100%;
          display: inline-block;
          .mapicon{
            width: 50rpx;
            height: auto;
            display: block;
            margin:16rpx auto 0;
          }
          .mapicontxt{
            font-size: 20rpx;
            line-height: 34rpx;
            text-align: center;
            color: #fff;
          }
        }
      }
    }
    
    
    

    很遗憾的是没有做出来地图可视区内周边搜索,boundary: ‘nearby(’ + this.data.latitude + ‘,’ + this.data.longitude + ‘, 1000)’,好像并没有控制在1000米范围内,希望有大佬看到还能提点一二。。

     

    以下是相关网站链接 供参考:

    微信小程序官网 地图api详细介绍:https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

    微信小程序开发——地图 API(腾讯地图api大全 详细api)https://blog.csdn.net/Qjy_985211/article/details/88107733

    微信官网api:https://lbs.qq.com/qqmap_wx_jssdk/method-getsuggestion.html

    微信小程序----map组件实现检索【定位位置】周边的POI:https://www.cnblogs.com/dalulu/p/9443564.html

    微信小程序获取地理位置名称,附近地理信息,根据经纬度距离计算等问题详解https://blog.csdn.net/zhongguohaoshaonian/article/details/80870415

    微信小程序 腾讯地图大头针定位,获取当前地址,地图移动选点,定位当前位置:https://blog.csdn.net/summer_ck/article/details/89456675

    微信小程序地图搜索:https://blog.csdn.net/summer_ck/article/details/89472134

    展开全文
  • 微信小程序地图map使用demoMapDemo-master.zip
  • 微信小程序地图定位Demo,使用微信内置地图查看API定位,调用应用实例的方法获取全局数据,运行实例后,若手机上打开有GPS功能,则会自动在地图上定位至自己的位置,很多Android中的应用或微信小程序应用,都会默认...
  • 主要介绍了微信小程序地图绘制线段并且测量,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个...

      最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个过程中,用到了微信小程序的组件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

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,119
精华内容 7,647
关键字:

微信小程序地图

微信小程序 订阅