zoukankan      html  css  js  c++  java
  • 微信小程序 引用 map 地图,显示当前位置

    1、定位用到 wx.getLocation 函数,地图使用 map组件,详细教程参照官网; 注意事项:在给经度 和纬度赋值时,千万不能赋错;

    2、先看下效果图:

    3、在wxml页面定义map组件,包含 longitude、latitude、markers、scale、

    show-location属性,并设置了 宽度和高度自适应(由于我设置了page是100%,所以我这里高度设置100%就是自适应容器高度了),代码如下:
          wxml:
    <view class="" hover-class="none" hover-stop-propagation="false" style=" 100%; height: 100%;">
    
      <map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="13" show-location style=" 100%; height: 100%;"></map>
      {{longitude}}
    
    </view>

         wxss:

    page{
      height: 100%;
    }

        js:

    Page({
       data:{
        longitude: 113.324520,
        latitude: 23.099994,
        markers:[{
          id: 0,
          iconPath: "../../images/icon_cur_position.png",
          latitude: 23.099994,
          longitude: 113.324520,
           50,
          height: 50
        }]
       },
       onLoad: function(){
         var that = this;
         wx.getLocation({
           type: "wgs84",
           success: function(res){
             var latitude = res.latitude;
             var longitude = res.longitude;
            //console.log(res.latitude);
             that.setData({
              latitude: res.latitude,
              longitude: res.longitude,
              markers:[{
                latitude: res.latitude,
                longitude: res.longitude
              }]
             })
           }
         })
       },
       onReady: function(){
    
       }
     })
  • 相关阅读:
    idea快捷键
    cas的缺点
    mybatis plus 实现逻辑删除
    mybatis plus的条件查询
    POI写非常大的数据量时
    POI中HSSF和XSSF
    JMM是什么
    Android面试收集录10 LruCache原理解析
    Android面试收集录9 IntentService详解
    Android面试收集录8 HandlerThread详解
  • 原文地址:https://www.cnblogs.com/siyecao2010/p/9476277.html
Copyright © 2011-2022 走看看