微信小程序——添加地图、地图上打点、自定义地图

前端 同时被 3 个专栏收录
10 篇文章 0 订阅
1 篇文章 1 订阅
12 篇文章 0 订阅

目录

1.摘要

 1.1 开发工具

 1.2 开发框架

 1.3 版本号

2. 添加地图

3. 地图打点 

4. 个性化地图

4.1 申请开通个性化地图能力

4.2 添加小程序个性地图

4.3 自定义地图


1.摘要

 1.1 开发工具

微信开发者工具、sublime、git

 1.2 开发框架

wepy2.0

 1.3 版本号

微信开发者工具2.9.5、sublime3.2.2、wepy2.0

2.添加地图

参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/map.html

<template>
  <map style="width: {{mapWidth }}rpx; height: {{mapHeight}}rpx;"/>
</template>
<script>
  import wepy from "@wepy/core"
  wepy.page({
    data: {
      mapWidth:'',
      mapHeight:''
    },

    onLoad () {
      var sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth*2,
      mapHeight = sy.windowHeight*2;
      this.mapWidth = mapWidth,
      this.mapHeight = mapHeight
    }
  })
</script>

tips:

  1. show-location  显示带有方向的当前定位点,本项目不需要不添加。

  2. scale="4" 缩放比例,缩放级别,取值范围为3-20

3.地图打点 

<template>
  <map style="width: {{mapWidth }}rpx; height: {{mapHeight}}rpx;" markers="{{markers}}" include-points="{{markers}}"/>
</template>
<script>
  import wepy from "@wepy/core"
  wepy.page({
    data: {
      mapWidth:'',
      mapHeight:'',
      markers: [
        {
          iconPath: "../public/markers.png",
          id: 0,
          latitude: 30.281714,
          longitude: 120.180895,
          width: 40,
          height: 40,
          label: {
            content: "下城",
            color: "#fff",
            fontSize: 12,
            anchorX: -(0.5 * (3 * 24))/2,
            textAlign: "center"
          }
        },
        {
          iconPath: "../public/markers.png",
          id: 1,
          latitude: 40.380874,
          longitude: 116.852466,
          width: 40,
          height: 40,
          label: {
            content: "鄂尔多斯",
            color: "#fff",
            fontSize: 12,
            anchorX: -(0.5 * (5 * 24))/2,
            textAlign: "center"
          }
        }
    },

    onLoad () {
      var sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth*2,
      mapHeight = sy.windowHeight*2;
      this.mapWidth = mapWidth,
      this.mapHeight = mapHeight
    }
  })
</script>

tips:

  1. 添加markers,目前使用微信开发者2.10.0会出现:Cannot read property 'anchorX' of undefined,换为低版本即可。
  2.  include-points  缩放视野以包含所有给定的坐标点
  3. markers的图标想要圆的可直接让设计做成圆形,用iconPath添加
  4. label中的content不能居中的问题:
    anchorX: -(0.5 * (name.length * fontsize))/2,这是网上看到的解决方法。
    例如:
    label: {
      content: "鄂尔多斯",
      color: "#fff",
      fontSize: 12,
      anchorX: -(0.5 * (5 * 24))/2,
      textAlign: "center"
    }
    这里content设置成name.length+1是因为在真机上会出现偏移,+1就正好居中。。。fontSize我也不知道为什么是2倍
    反正这样设置就居中了label的文字,希望官方能出自适应的居中吧
  5. 不给map宽高生成的地图会变得很小一块在左上角
  6. 目前好像不支持文字阴影加粗等属性

 4. 个性化地图

4.1 申请开通个性化地图能力

开发-开发者工具-腾讯位置服务

      

 

4.2 添加小程序个性地图

控制台-key管理-样式选择

 

 

<map style="width: 100%; height: {{mapHeight}}rpx;" scale="4" subkey="你的key" markers="{{markers}}" include-points="{{markers}}"/>

tips:这里将width写成之前的 {{mapWidth}}rpx,开发者程序没问题,真机上右边会有白边,改成width:100%,并将父盒子宽度也100%,白边消失。

标题

 这为什么不能放一块。。。。。。。

 

4.3 自定义地图

控制台-个性化地图-样式选择-编辑样式

可修改边线、区块等内容的显示隐藏、颜色

tips:

  1. 修改之后保存, 控制台-个性化地图-我的样式-应用样式设置-编辑,点击选择地图样式下图片,替换自定义的样式
  2. 开发者工具并不显示自定义样式,用真机查看。
  3. 在更换样式后代码不用改动,不用重新上传。

 

  • 5
    点赞
  • 2
    评论
  • 32
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值