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

最新推荐文章于 2025-03-20 22:19:15 发布

tian-happy

最新推荐文章于 2025-03-20 22:19:15 发布

阅读量2.2w

点赞数 13

分类专栏：前端微信小程序代码

本文链接：https://blog.csdn.net/sinat_38011533/article/details/103988304

版权

代码同时被 3 个专栏收录

12 篇文章

订阅专栏

前端

10 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

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:

show-location 显示带有方向的当前定位点,本项目不需要不添加。
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:

添加markers，目前使用微信开发者2.10.0会出现：Cannot read property 'anchorX' of undefined，换为低版本即可。
include-points 缩放视野以包含所有给定的坐标点
markers的图标想要圆的可直接让设计做成圆形，用iconPath添加
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的文字，希望官方能出自适应的居中吧
不给map宽高生成的地图会变得很小一块在左上角
目前好像不支持文字阴影加粗等属性

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：

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