微信小程序 地图(map)实例详解

 更新时间:2016年11月16日 10:09:57   作者:dzp_coder  
这篇文章主要介绍了微信小程序 地图(map)实例详解的相关资料,这里对微信小程序的地图API 进行了详细介绍并附示例代码和实现效果图,需要的朋友可以参考下

微信小程序 地图(map)实例

          这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下。

今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果.

上图:



经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题

下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图.


markers中的rotate是图标的旋转角度.如果需要平行于屏幕的图标,那就设置为0吧.

另外,覆盖物的图标是可以修改的.给iconPath设置路径即可.

上一段代码:

<!--index.wxml--> 
<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> 
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map> 
//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: '浦东新区', 
   desc: '我的位置' 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: '../images/car.png', 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
}) 

2.wx.getLocation(OBJECT) 获取当前位置API


红色框标出的就是经纬度,速度,精确度

用gch02返回的坐标可以直接打开地图.

具体api见文档


3.wx.openLocation(OBJECT) 查看位置

最简单粗暴的就是直接给经纬度定位.

代码:

/index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  wx.getLocation({ 
   type: 'gcj02', 
   success: function (res) { 
    var latitude = res.latitude 
    var longitude = res.longitude 
    var speed = res.speed 
    var accuracy = res.accuracy 
    console.log("latitude:" + latitude) 
    console.log("longitude:" + longitude) 
    console.log("speed:" + speed) 
    console.log("accuracy:" + accuracy) 
    wx.openLocation({ 
     latitude: latitude, 
     longitude: longitude, 
     scale: 28 
    }) 
   } 
  }) 
 } 
}) 

真机测试 效果图:



感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • JS代码的格式化和压缩

    JS代码的格式化和压缩

    JS代码的格式化和压缩...
    2006-06-06
  • 微信小程序 wxapp地图 map详解

    微信小程序 wxapp地图 map详解

    这篇文章主要介绍了微信小程序 wxapp地图 map基础知识的相关资料,并附简单实例,帮助大家学习理解,需要的朋友可以参考下
    2016-10-10
  • 微信小程序实现拖拽 image 触摸事件监听的实例

    微信小程序实现拖拽 image 触摸事件监听的实例

    这篇文章主要介绍了微信小程序实现拖拽 image 触摸事件监听的实例的相关资料,这里提供image触摸并监听的简单实例,需要的朋友可以参考下
    2017-08-08
  • JavaScript 对象详细整理总结

    JavaScript 对象详细整理总结

    这篇文章主要介绍了JavaScript 对象详细整理总结的相关资料,需要的朋友可以参考下
    2016-09-09
  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    这篇文章主要介绍了详解微信小程序Radio选中样式切换的相关资料,需要的朋友可以参考下
    2017-07-07
  • 微信小程序 audio 组件实例详解

    微信小程序 audio 组件实例详解

    这篇文章主要介绍了微信小程序 audio 组件实例详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • Evil.js项目源码解读

    Evil.js项目源码解读

    这篇文章主要为大家介绍了最近火爆全网的 Evil.js 源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解

    这篇文章主要介绍了微信小程序 自定义对话框实例详解的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下
    2017-01-01
  • arcgis js完整悬停效果实现demo

    arcgis js完整悬停效果实现demo

    这篇文章主要为大家介绍了arcgis js完整悬停效果实现demo详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 如何编写高质量 JavaScript 代码

    如何编写高质量 JavaScript 代码

    如果要编写出高质量的 JavaScript 代码,可以从以下三个方面去考虑。分别是:易阅读的代码、高性能的代码、健壮性的代码。下面我将分别对这三个方面进行阐述。需要的朋友可以参考一下
    2021-09-09

最新评论