精华内容
下载资源
问答
  • 地图组件顾名思义就是显示我们的地图的,通过经纬度,将位置在地图上显示出来;这里提几个常用属性,更多的可以到官网进行查阅。 属性 longitude:number类型,经度坐标 latitude:number类型,纬度坐标 markers:...

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

    属性

    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文档
    在这里插入图片描述
    地图组件的介绍就这么多了~

    展开全文
  • 微信小程序地图组件

    千次阅读 2019-08-23 07:36:35
    index.wxml <map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25" circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker">...

    index.wxml

    <map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25"  circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker"></map>

    index.js

    Page({
      data: {
        latitude:30.,
        longitude:114.,
        circles:[{
          latitude: 30.,
          longitude: 114.,
          fillColor:"#8DE25055",
          radius:30
        }],
        markers: [{
          iconPath: "/images/icon/map.png",
          latitude: 30.,
          longitude: 114.,
          width: 30,
          height: 30,
          title:"",
          id:0,
          label:{
            content:"",
            color:"#EE5E7B",
            borderWidth:1,
            borderColor:"#EE5E78",
            borderRadius:5,
            padding:5,
          },
          callout:{
            content:"",
            color:"#EE5E7B",
            borderWidth:1,
            borderColor:"#EE5E78",
            borderRadius:5,
            padding:5,
          }
        }],
      },
      marker(){
        
      }
    })

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达叔小生的简书!

    这是一个有质量,有态度的博客

    博客

    展开全文
  • 小程序 地图 自定义组件 底栏等示例 简单实用 wx-component 微信小程序自定义组件开发
  • 微信小程序地图组件使用详情

    万次阅读 2018-07-23 12:30:18
    介绍下微信小程序内使用地图组件(这里只介绍小程序前端功能) 直接看代码吧 wxml <view class="section map_container"> <map id="loactionMap" longitude="{{longitude}}" latitude="{{latitude}}" ...

    目前开发微信小程序的越来越多,周边也有很多小程序案例,

    介绍下微信小程序内使用地图组件(这里只介绍小程序前端功能)

    直接看代码吧

    wxml

    <view class="section map_container">
      <map id="loactionMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="17" show-location="true" style="width: {{mapWidth}}px; height: {{mapHeight}}px;" bindregionchange="regionChange">
        <cover-view class="controls-center" style="bottom:{{mapHeight/2}}px;left:{{mapWidth/2 - 14}}px;">
          <cover-image class="location-center-img" src="/images/marker_red.png" />
        </cover-view>
    
        <cover-view class="controls-address-panel" style="bottom:0px;left:0px;">
          <cover-view class="map_text">
            <cover-view>
              <cover-view class="address-name">{{textData.name}}</cover-view>
              <cover-image wx:if="{{searchLoadingStatus==1}}" 
              class="cover-image-loading" src="/images/goLoad.gif" />
            </cover-view>
            <cover-view class="address-desc">{{textData.desc}}</cover-view>
          </cover-view>
        </cover-view>
      </map>
    </view>

     

    Page({
      data: {
        mapCtx: null,
        mapWidth: 200,
        mapHeight: 200,
        longitude: 114.0322103,
        latitude: 22.5353646,
        markers: [],
        textData: { name: '', desc: '' },
        //0:加载完成  1:加载中
        searchLoadingStatus: 0,
        //当前选中纬度信息
        currentLocationInfo: {
          longitude: 0,
          latitude: 0
        }
      },
      regionChange: function (e) {
        var that = this;
        var changeType = e.type;
      },
      amapGetRegeo: function (longitude, latitude) {
        var that = this;
        myAmapFun.getRegeo({
          location: longitude + ',' + latitude,
          success: function (data) {
            if (data != null && data.length > 0) {
              that.setData({
                textData: {
                  name: data[0].desc,
                  desc: data[0].regeocodeData.formatted_address
                },
                currentLocationInfo: {
                  longitude: longitude,
                  latitude: latitude
                }
              });
              //console.log(that);
            }
            that.setData({
              searchLoadingStatus: 0
            });
          }
        })
      },
      onReady: function (e) {
        var that = this;
        // 使用 wx.createMapContext 获取 map 上下文
        that.mapCtx = wx.createMapContext('loactionMap', this);
      },
      onLoad(options) {
        var that = this;
    
        that.authorAddress();
        that.setMapSize();
        that.getShareLocation(options);
      },
      //用户地理位置授权
      authorAddress:function(){
        var that = this;
        that.getCurrentLocation('gcj02', function (res) {
          console.log(res);
          that.setData({
            longitude: res.longitude,
            latitude: res.latitude
          });
        });
      },
      //初始化当前位置
      getCurrentLocation: function (typeCode, succFun) {
        var that = this;
        wx.getLocation({
          type: typeCode,
          success: function (res) {
            return succFun(res);
          },
          fail:function(res){
            wx.openSetting({
              success: function (data) {
                console.log(4444)
                console.log(data);
                that.authorAddress();
              },
              fail: function () {
                console.info("设置失败返回数据");
              }
            });
          }
        })
      }
    });
    

    wxss

    .map_text{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0px;
      height: 70px;
      background: #fff;
      padding: 0 10px;
    }
    .address-name{
      margin: 10px 0;
      font-size:35rpx;
      font-weight: bold;
      float: left;
    }
    .address-desc{
      margin: 5px 0;
      display: block;
      font-size:26rpx;
    }
    .controls {
      position: absolute;
      width: 100rpx;
      bottom: 150rpx;
      right:10rpx;
    }
    
    .controls-center{
      position: absolute;
      width: 30px;
    }
    .controls-center-add{
      position: absolute;
      width: 33px;
    }
    
    .controls-address-panel{
      position: absolute;
      width: 100%;
      height:80px;
    }
    
    .cover-image-loading{
      width:15px;
      height:15px;
      float:left;
      padding-top:12px;
      padding-left:5px; 
    }
    
    .favorite-img {
      width: 100rpx;
      height: 100rpx;
    }

    小程序成品预览

    不清楚的地方可以加我微信

     

     

    展开全文
  • 1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称“西保火车站墓地”,点国殇墓园那个五角星的符号,跳转到...

    先上效果图,有兴趣再往下看。
    1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称“西保火车站墓地”,点国殇墓园那个五角星的符号,跳转到页面4,国殇墓园的介绍。各自的墓地点位对应着各自的介绍页面。大致流程就是这样的。
    这里写图片描述
    内容不说,咱只讲技术,后文会附上源码,如果有兴趣,可以根据这个教程,套上别的内容,做一些其他的小程序,例如昆明市中学分布简介、某地周边美食盘点……
    我们先把这个实例根据要实现的功能分解一下,这样一条条讲述,会清晰一些。


    A、新建小程序:包括小程序的结构,新建页面。。
    B、页面设计:在页面上设置字体,插入图片,修改导航栏内容等。
    C、页面跳转的实现。
    D、地图调用:把地图加载入页面,设置地图显示级别,在地图上标点位,设置点位的标注、标注显示与否,点击点位跳转页面。


    写得详细一些。
    A、新建小程序:
    再好的教程也比不上官方的好。
    https://mp.weixin.qq.com/debug/wxadoc/dev/
    这篇微信小程序官方教程讲的是申请账号、安装开发者工具、自动生成一个获取用户信息的小程序。
    这些不赘述了,讲几点注意事项。
    1.微信开发者工具打开之后,如果是新建项目,那么一定要先建立一个空的文件夹,项目名称是文件夹的名称,选择建立普通快速启动模板
    如图所示这里写图片描述
    要打开现有项目的话,项目目录一定要对,一般是有app文件的目录下。
    快速启动模板的结构不看了,把远征军墓地程序结构看一下。
    这里写图片描述
    看1中,icon.png、wujiaoxing.png、忠魂归国.jpg、蓝姆迦.jpg这些图片都放在了images目录下,这个目录是一级目录,跟pages是同级的,图片这么放,是为了避免图标不显示的问题,这个问题在这篇博文中已经说过了,就不赘述了。
    http://blog.csdn.net/sinat_41310868/article/details/78896324
    加一点之前没说过的,小程序中的目录,就是系统里的文件夹,可以直接在远征军墓地分布小程序的根目录下,新建一个images文件夹,把图片拷贝进去就行。
    如图所示:
    这里写图片描述
    所以说小程序还是挺人性化、便捷化的。
    接着看2,我把所有墓地对应的网页都放在了hmtl目录下了,一共有20个,建立这些网页可以用新建目录——新建page的方法,也可以用一个更简单的方法。
    我们看3,app.json这个文件是小程序的全局变量,小程序中所有的page都存在了这里。

    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "map/map/map",
        "hmtl/1/1",
        "hmtl/2/2",
        "hmtl/3/3",
        "hmtl/4/4",
        "hmtl/5/5",
        "hmtl/7/7",
        "hmtl/8/8",
        "hmtl/9/9",
        "hmtl/10/10",
        "hmtl/11/11",
        "hmtl/12/12",
        "hmtl/13/13",
        "hmtl/14/14",
        "hmtl/15/15",
        "hmtl/16/16",
        "hmtl/17/17",
        "hmtl/18/18",
        "hmtl/19/19",
        "hmtl/20/20",
        "hmtl/0/0"
    
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "中国远征军墓地分布图",
        "navigationBarTextStyle": "black"
      }
    }

    这个页面的数据格式是json的,我们可以 “pages”: 这个列表里面直接敲入路径,例如”hmtl/1/1”,hmlt这个目录下就出现了1这个目录,而1下面就有了1这个page。
    当然如果用新建目录——新建page的方法添加page,app.json的代码也会变化。
    神奇吧,这样的话,添加页面就方便多了。
    不过要注意,不要敲错字,顺着列表来,添加,不要随便插入,这个试验几遍就可以掌握了。
    删东西也可以在文件夹里删,不用在程序界面,这样反而不容易出错,这是经验之谈。


    B、页面设计
    先说一下全局性的东西。
    app.js没动。
    app.json代码如上,除了那几个page外,改了一个属性,就是”navigationBarTitleText”: “中国远征军墓地分布图”。把全局的导航条的名头改成了中国远征军墓地分布图。
    app.wxss没动。
    project.config.json没动。
    pages里的index是初始页面,这里面三个文件都有改动。
    index.wxml:这个文件就像网页设计中的HTML,把网页的框架样式搭建出来了。

    <!--index.wxml-->
    <view bindtap="gonext">
       <view class="copyright">二战后期,国民政府组建远征军两度入缅作战,打通滇缅公路。</view>
       <view class="copyright">这两次入缅作战极为悲壮,为了挽救祖国于危亡,近十万将士客死他乡。</view>
       <view class="copyright">远征军将士牺牲后,大多都就地安葬,这些墓地多分布在印度兰姆迦、玛格丽塔、缅甸新平洋、密支那等地。</view>
       <view class="copyright">本程序以地图的方式将那些墓地和那段历史呈现出来。</view>
       <view class="copyright">谨以此,纪念那些将最宝贵的生命贡献于漫漫历史长河的人们。</view>
    </view>
    <view class="copyright_item">本程序资料大多数来源于滇缅抗战史学者戈书亚著述</view>

    其中bindtap=”gonext”,是点击页面的时候,调用gonext函数。class是类,同类具有同种属性。
    index.wxss:这个就有点像css了,样式。

    /**index.wxss**/
    .copyright{
        color: darkblue;
        padding: 10px;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        text-align: center;
        font-size:20px;
    
    }
    .copyright_item{
        color: black;
        padding: 10px;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 180px;
        margin-top: 40px;
        text-align: left;
    }

    这个没什么可说的,颜色、字体、对齐等等,规定了就按规定走,不规定就是默认的。
    index.js:

    Page({
      data: {
        // text:"这是一个页面"
      },
      gonext: function () {
        wx.navigateTo({ url: "/map/map/map" });
      }
    
    })

    程序是标准的,模板都是固定的,可以看到小程序的js文件就跟网页设计中的JavaScript差不多,动作。这几行代码很简单,Page{(data:{})}是固定的模式。
    里面定义了一个函数,就是wxml中bindtap的值gonext。
    wx.navigateTo({url:});是微信小程序内置的函数,跳转小程序内部的网页。
    index启动页没啥东西,就是点击跳转map页面。
    在进入地图调用之前,再看一个页面,国殇墓园那页。就是”hmtl/0/0”这页。
    这个page一共4个文件,js、json、wxml、wxss。
    其中0.js没动。
    0.json:

    {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#000",
      "navigationBarTitleText": "国殇墓园",
      "navigationBarTextStyle": "#fff"
    }

    app.json中对全局进行了设置,如果单个页面不改的话,就是默认了全局设置,要改的话,就在单个页面的json中修改,这个0.json把这个页面的导航条颜色改成了黑色(#000),导航条文字改成了国殇墓园,文字颜色改成了白色(#fff)。
    0.wxml:

    <!--hmtl/0/0.wxml-->
    <view>
      <image mode="aspectFit" src="/images/忠魂归国.jpg"></image>
    </view>
    <text>国殇墓园位于中华人民共和国云南省保山市腾冲县城西南1公里处的叠水河畔、来凤山北麓,是为纪念抗日战争时期中国远征军第二十集团军攻克腾冲战斗中阵亡将士而建的墓园,是目前中国规模最大、保存也最完整的抗战时期正面战场阵亡将士纪念陵园。
    “忠魂归国”行动发起于2011年,当年,19位孤旅异邦的中国远征军将士遗骸归葬此地,2014年中国远征军在八莫、南坎两处墓地的部分遗骸经火化后装入22个骨灰罐,腊戌、芒友的两处墓地的圹兆土分别装入2个骨灰罐,总共24个骨灰罐,归葬此地。</text>

    主要看一下image,aspectFit是保持纵横比缩放图片。
    src指向路径。
    更多的可以参考官方文档。
    https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html
    0.wxss没动。因为也没有定义class。
    接下来进入重头戏。


    C、页面跳转,上文已经说了,程序内的页面跳转通过wx.navigateTo功能实现。

    D、地图调用:把地图加载入页面,设置地图显示级别,在地图上标点位,设置点位的标注、标注显示与否,点击点位跳转页面。
    map/map这个目录下有4个文件,其中map.json和map.wxss都没有动。
    map.wxml:

    <!--map/map/map.wxml-->
    <map id="map" longitude="105.996094" latitude="35.029996" scale="3"  markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange"  style="width: 100%; height: 100vh;"></map>

    同样可以参考这篇博文。
    http://blog.csdn.net/sinat_41310868/article/details/78896324
    说几个没有的。
    1获取坐标值,用坐标拾取器就行,百度、高德都有,腾讯的是这个
    http://lbs.qq.com/tool/getpoint/
    2腾讯地图内容不多,没有境外的要素,中国国界以外都是白的。因为我要用缅甸的地图,白的可不好,所以我就去调用了百度地图,遗憾的发现,调用在小程序中的百度地图境外也是白的!
    这可不太好。
    不过,虽然目的没有达成,但还是get了调用百度地图的技能。
    如何在小程序中调用百度地图,可以参考百度官方教程。
    http://lbsyun.baidu.com/index.php?title=wxjsapi
    如何获取百度地图AK,这篇博文里有讲到。
    http://blog.csdn.net/sinat_41310868/article/details/78746094

    map.js:

    // map/map/map.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        markers: [{
          iconPath: "/images/wujiaoxing.png",
          id: 0,
          latitude: 25.026093,
          longitude: 98.481338,
          width: 25,
          height: 25,
          callout: {
            content: "国殇墓园",
            fontSize: 20,
            display: "ALWAYS"
          }
        },
        {
          iconPath: "/images/icon.png",
          id: 1,
          latitude: 23.600166,
          longitude: 85.483411,
          width: 15,
          height: 15,
          callout: {
            content: "中国驻印军蓝姆迦公墓",
            fontSize: 15,
            display: "BYCLICK"
          }
        },
        {
          iconPath: "/images/icon.png",
          id: 2,
          latitude: 27.266935,
          longitude: 95.650210,
          width: 15,
          height: 15,
          callout: {
            content: "玛格丽塔中国军人墓地",
            fontSize: 15,
            display: "BYCLICK"
          }
        },
    
      },
    
      markertap: function (e) {
        if(e.markerId==0){
          wx.navigateTo({ url: "/hmtl/0/0" })
        }
        else if(e.markerId == 1) {
          wx.navigateTo({ url: "/hmtl/1/1" })
        }
        else if (e.markerId == 2) {
          wx.navigateTo({ url: "/hmtl/2/2" })
        }
       },
    
    
    
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    这段代码主要就是两个部分,1是把坐标点展到地图上,2是实现点击坐标点的时候跳转对应页面。
    这是一个点,也就是一个marker的代码,iconPath是图标的路径,该点id,纬度、经度、图标高度、图标宽度。
    callout和label都是点位的标注,看喜欢哪个就用哪个吧。用法差不多。
    content名称是国殇墓园,fontSize字大小,dispaly显示:BYCLICK是点击的时候显示,ALWAYS是一直显示。
    {
    iconPath: “/images/wujiaoxing.png”,
    id: 0,
    latitude: 25.026093,
    longitude: 98.481338,
    width: 25,
    height: 25,
    callout: {
    content: “国殇墓园”,
    fontSize: 20,
    display: “ALWAYS”
    }
    }
    这里写图片描述
    程序稍微改了改,中国驻印军蓝姆迦公墓是callout,国殇墓园是label。有点不一样,感觉还是callout更好看些。
    markertap函数,点击点位跳转网页。
    能注意到,小程序中,值用{{}},函数用”“引用。
    在markers[]中,给每个marker赋了id,id的用处在这个函数中体现出来了。
    id与点位唯一对应。
    function(e),当前对象就是e呗,就是点击的那个点位,e.markerId就是点位的id。如果id==0,就跳转/hmtl/0/0这个页面。
    if else if else if。

    markertap: function (e) {
    if(e.markerId==0){
    wx.navigateTo({ url: “/hmtl/0/0” })
    }
    else if(e.markerId == 1) {
    wx.navigateTo({ url: “/hmtl/1/1” })
    }
    else if (e.markerId == 2) {
    wx.navigateTo({ url: “/hmtl/2/2” })
    }
    },

    好了。整个程序都说完了,代码也都在行文中提供了。
    这是一个很简单的小程序,也算是我第一个搭建出来的小程序吧!
    说实话,我是一个技术控,但不是一个程序员,地图与地理信息相关的东西,我都尝试过,单说编程语言,VB、JAVA、C+、python等都用过,不过都是入门水平,而且在同一时间段里,这些语言是混用的,这会导致人特别恍惚,看着一段代码var和val不分,就像软件用太多了一样,我也很少用快捷键。
    单从我有限的经历来说,微信小程序是比较好学,也比较好入门的东西,不过前提是,还是需要有一些编程基础的。
    有一个想法,要付诸实现,不能只想,一定要做,一定要写出来。
    现在小程序很火,网上资料很多,淘宝上也有卖源码的,尤其是腾讯是中国的,我们很少能看到官方教程是中文的吧?这一点,几乎让我热泪盈眶。
    现在的程序入门,越来越趋向于简单化,只要能耐得下心,做出一个小东西,肯定是不难的。
    但是任何领域,任何工作,要是想往高精尖上发展,还是任重道远的。
    稍微分享一下我学习小程序的经过吧。
    因为我真的不是程序员,所以我的编程基础很一般。

    展开全文
  • 推荐先查看map组件官方文档,基础部分只会稍带提一下,主要讲在开发《精准地图》这款微信小程序时遇到的一些问题,以及解决方案。 下面会根据开发《精准地图》期间遇到的地图组件问题进行讲述,《精准地图》把微信...
  • 在做一个通过腾讯地图api查询关键词搜索附近标记的小程序时遇到了这个问题 在这个事件触发时,会一直重复触发,你不动时地图他还是一直在触发 后来调试之后发现是我在bindupdated触发的函数内修改了地图的...
  • 微信小程序-地图示例 微信小程序-地图示例
  • 除本章节介绍的小程序地图基础属性外,腾讯位置服务推出《微信小程序解决方案》,从检索API、基础地图组件、个性化、插件、行业方案等多个层面,为不同场景需求的小程序开发者提供完整的地图能力。 个性化地图 个性...
  • 主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
  • 主要介绍了微信小程序开发之map地图组件,定位,并手动修改位置偏差,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 第一次在项目上使用小程序地图组件,摸索过程中也踩了一些坑,在csdn上看了一些博客,特此做个笔记,一是复习,二是给有需要的同志提供一些参考。(选取部分功能,代码片段为项目中截取部分,仅供参考。) 1. 创建...
  • map组件标点总是无法显示,初始位置定在非洲,因为腾讯地图没有覆盖非洲,不缩小就是个大白块 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}...
  • 主要介绍了微信小程序地图(map)组件点击(tap)获取经纬度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热。微信小程序的特点便是“无需安装,用完即走”,而我们所说的AR用在小程序上面感觉再适合不过了。...
  • 1.「微信小程序」实现获取当前位置并在地图上显示 http://blog.csdn.net/crazy1235/article/details/55004841 2.微信小程序地图功能 http://blog.csdn.net/crazy1235/article/details/55004841 前端开发,Java
  • 想学一下微信小程序,发现文档这东西,干看真没啥意思。所以打算自己先动手撸一个。摩拜单车有自己的小程序,基本功能都有,方便又小巧,甚是喜爱。于是我就萌生了一个给ofo共享单车撸一个小程序(不知道为啥ofo没有...
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 第一个问题: 某些情况下, ios 系统中,小程序地图组件不会显示; 详细描述: 这个问题仅仅存在于iOS中,地图组件如果在DOM 结构的偏前面的位置,会显示出来,  但是在DOM 结构的偏后位置加入地图组件,地图...
  • 案例:可访问本人github地址(功能完善中…) 使用腾讯地图SDK ; 目前已有功能:搜索,地址列表,pio点,出行方式,路线… 微信小程序map组件-腾讯地图SDK ...
  • 微信小程序-地图组件(map)的使用

    千次阅读 2018-08-26 14:45:03
    在微信开发文档给出的信息来看,它使用的是高德地图的api。 我们来到高德地图的官方坐标拾取器界面,得到示例坐标。 我们在组件中放上map组件,这里提及一下,两个官方要求的注意点: 请注意原生组件使用限制。 ...
  • 微信小程序map组件拖拽地图中心点固定 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2 原生组件 <map id="map4select" :style="{height: mapHeight+'px' , width: mapWidth +'px'}" :latitude=...
  • 微信小程序中使用自带的地图组件

    千次阅读 2019-08-08 10:54:46
    1.index.wxml <!--index.wxml--> <view class="container"> ...map id="map" longitude="116.39" latitude="39.90" scale="14" style="width:100%;height:400px" markers="{{markers}}">...
  • 微信小程序中Map地图组件的使用

    千次阅读 2019-05-06 21:56:42
    常用功能一:绘制地图标记点一个或多个 map.wxml <!-- longitude 经度 latitude 纬度 scale 缩放层级 最小5,最大18 markers 地图标记 bindmarkertap 点击markers时的事件 polyline="{{polyline}}" 绘制...
  • 主要介绍了微信小程序使用map组件实现检索(定位位置)周边的POI功能,涉及微信小程序基于map组件与高德地图PAI接口的定位操作相关使用技巧,需要的朋友可以参考下
  •  1、代码部分  wxml <view class="view"> <map id="map" longitude="{{longitude}}" //经度 latitude="{{latitude}}" //纬度 show-location="true" > //是否显示当前定位 <...
  • 主要介绍了微信小程序地图导航功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果。...
  • 博客概要 就,利用小程序地图map组件实现单点定位并获取当前经纬度,做一个简单的分享~ 文章目录 博客概要 组件map 1.运行结果 2.代码示例 3.元素说明 总结 组件map 1.运行结果 2.代码示例 没给样式代码噢,自己敲...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,615
精华内容 12,646
关键字:

小程序地图组件