首页 > 编程语言 >微信小程序：地图组件入门

微信小程序：地图组件入门

时间：2023-02-20 11:24:02浏览次数：33  
标签：114.31667 入门 微信 30.51667 30 longitude latitude 组件 id

一、入门案例

新建一个页面，在wxml文件中编写下面的代码

<map/>

效果如下：

发现此时地点在北京。

我们设置一下地图的宽和高

<map  style="width:100%;height: 600rpx;"/>

效果如下：

没错，通过这段代码，默认就能调用出一个地图组件，但是仅仅能显示地图而已，并无其他功能，如果我想要一些自定的功能怎么办？我们可以调用map组件提供的一些属性，具体属性如下表。

属性名

类型

默认值

说明

longitude

Number

  

中心经度

latitude

Number

  

中心纬度

scale

Number

16

缩放级别，取值范围为5-18

markers

Array

  

标记点

polyline

Array

  

路线

polygons

Array

  

多边形

circles

Array

  

圆

include-points

Array

  

缩放视野以包含所有给定的坐标点

show-location

Boolean

  

显示带有方向的当前定位点

subkey

String

''

个性化地图使用的key，仅初始化地图时有效

enable-3D

Boolean

false

展示3D楼块(工具暂不支持）

show-compass

Boolean

false

显示指南针

enable-overlooking

Boolean

false

开启俯视

enable-zoom

Boolean

true

是否支持缩放

enable-scroll

Boolean

true

是否支持拖动

enable-rotate

Boolean

false

是否支持旋转

bindmarkertap

EventHandle

  

点击标记点时触发，会返回marker的id

bindcallouttap

EventHandle

  

点击标记点对应的气泡时触发，会返回marker的id

bindcontroltap

EventHandle

  

点击控件时触发，会返回control的id

bindregionchange

EventHandle

  

视野发生变化时触发

bindtap

EventHandle

  

点击地图时触发

bindupdated

EventHandle

  

在地图渲染更新完成时触发

bindpoitap

EventHandle

  

点击地图poi点时触发

1、添加经纬度

我们以武汉的经纬度为例

wxml

<map  style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}"/>

js

data: {
        latitude: '30.51667',
        longitude: '114.31667',
    },

效果如下：

发现此时的定位为武汉。

经纬度的使用案例：

当我们在微信小程序中展示地图时，如湖北省地图，如下所示：

<map style="width:100%;height: 775rpx;" latitude="29.995051" longitude="112.574526" polygons="{{polygons}}"  scale="{{scale}}"  markers='{{markers}}'/>

效果如下：

我们想让湖北省地图居中展示，此时可以通过调整地图的经纬度来调整湖北省地图的位置。

<map style="width:100%;height: 775rpx;" latitude="31.035423" longitude="112.199265" polygons="{{polygons}}"  scale="{{scale}}"  markers='{{markers}}'/>

效果如下：

2、设置缩放级别

缩放级别，取值范围为5-18

wxml

<map  style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}"/>

js

data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9
    },

效果

3、设置标记点

标记点用于在地图上显示标记的位置

wxml

<map  style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers='{{markers}}'/>

js

data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id: 1,
            latitude: '30.51667',
            longitude: '114.31667'
        }],
    },

效果

设置标记点的图标和宽高

data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
          }],
    },

效果如下:

marker上的标签label设置

data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            
            label:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              bgColor: "#fff",
              textAlign: 'left'
            }
          },
    
        ]
    },

效果如下：

地图上实现标记多个位置

    data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            
            label:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              bgColor: "#fff",
              textAlign: 'left'
            },
          },
          {
            id:2,
            latitude: '30.51',
            longitude: '114.41',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            label:{
                content:"华中科技大学",
                color:"#EE5E7B",
                borderWidth:1,
                borderColor:"#EE5E78",
                borderRadius:5,
                padding:5,
                bgColor: "#fff",
                textAlign: 'center'
              },
          }
        ]
    },

效果如下：

marker 上的气泡 callout

    data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            callout:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              fontSize: 16,
              textAlign: 'center',
              display: "ALWAYS"
            }
          },
          {
            id:2,
            latitude: '30.51',
            longitude: '114.41',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
              callout:{
                content:"华中科技大学",
                color:"#EE5E7B",
                borderWidth:1,
                borderColor:"#EE5E78",
                borderRadius:5,
                padding:5,
                fontSize: 16,
                textAlign: 'center',
                display: "ALWAYS"
              }
          }
        ]
    },

效果：

4、设置路线polyline

指定一系列坐标点，从数组第一项连线至最后一项

wxml

<map  style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers='{{markers}}' polyline='{{polyline}}'/>

js

data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            callout:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              fontSize: 16,
              textAlign: 'center',
              display: "ALWAYS"
            }
          },
          {
            id:2,
            latitude: '30.51',
            longitude: '114.41',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
              callout:{
                content:"华中科技大学",
                color:"#EE5E7B",
                borderWidth:1,
                borderColor:"#EE5E78",
                borderRadius:5,
                padding:5,
                fontSize: 16,
                textAlign: 'center',
                display: "ALWAYS"
              }
          }
        ],
        polyline: [{
            points: [{
              latitude: "30.506244",
              longitude: "114.448641"
            },
            {
              latitude: "30.503899",
              longitude: "114.443437"
            },
            {
              latitude: "30.502638",
              longitude: "114.440635"
            }
            ,
            {
              latitude: "30.499478",
              longitude: "114.435335"
            }
            ,
            {
              latitude: "30.50002",
              longitude: "114.423009"
            },
            {
              latitude: "30.479808",
              longitude: "114.420928"
            }
          ],
            color: "#FA6400",
            width: 10,
            arrowLine: true,
            borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
          }]
    },

效果如下：

5、设置多边形polygons

指定一系列坐标点，根据 points 坐标数据生成闭合多边形 

wxml

<map style="width:100%;height: 600rpx;" latitude="30.145935" longitude="111.583911" scale="13" polygons="{{polygons}}"/>

js

 data: {
        polygons: [{
            points:  [
                {
                    "longitude": 111.596827, 
                    "latitude": 30.155319
                }, 
                {
                    "longitude": 111.595524, 
                    "latitude": 30.157613
                }, 
                {
                    "longitude": 111.591657, 
                    "latitude": 30.161923
                }, 
                {
                    "longitude": 111.588356, 
                    "latitude": 30.164869
                }, 
                {
                    "longitude": 111.588275, 
                    "latitude": 30.166908
                }, 
                {
                    "longitude": 111.583639, 
                    "latitude": 30.166177
                }, 
                {
                    "longitude": 111.584367, 
                    "latitude": 30.165114
                }, 
                {
                    "longitude": 111.584084, 
                    "latitude": 30.163148
                }, 
                {
                    "longitude": 111.58516, 
                    "latitude": 30.161378
                }, 
                {
                    "longitude": 111.583647, 
                    "latitude": 30.159486
                }, 
                {
                    "longitude": 111.579068, 
                    "latitude": 30.157481
                }, 
                {
                    "longitude": 111.576778, 
                    "latitude": 30.156143
                }, 
                {
                    "longitude": 111.574424, 
                    "latitude": 30.152133
                }, 
                {
                    "longitude": 111.573736, 
                    "latitude": 30.149608
                }, 
                {
                    "longitude": 111.573898, 
                    "latitude": 30.147965
                }, 
                {
                    "longitude": 111.577603, 
                    "latitude": 30.149152
                }, 
                {
                    "longitude": 111.578194, 
                    "latitude": 30.149995
                }, 
                {
                    "longitude": 111.596827, 
                    "latitude": 30.155319
                }
            ],//给个空数组在页面刚开始渲染的时候会报错，但是不影响使用
            fillColor: "#ffff00",
            strokeColor: "#00B277",
            strokeWidth: 2,
            zIndex: 1
          }],
    },

效果如下:

通过点击地图上的点来画多边形

wxml

<map  style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers='{{markers}}' polyline='{{polyline}}' 
bindtap="bindMap"  polygons="{{polygons}}"/>
<button type="primary" bindtap="clearGon">清除点或面</button>

js

    data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            
            callout:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              fontSize: 16,
              textAlign: 'center',
              display: "ALWAYS"
            }
          },
          {
            id:2,
            latitude: '30.51',
            longitude: '114.41',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
              callout:{
                content:"华中科技大学",
                color:"#EE5E7B",
                borderWidth:1,
                borderColor:"#EE5E78",
                borderRadius:5,
                padding:5,
                fontSize: 16,
                textAlign: 'center',
                display: "ALWAYS"
              }
          }
        ],
        polyline: [{
            points: [{
              latitude: "30.506244",
              longitude: "114.448641"
            },
            {
              latitude: "30.503899",
              longitude: "114.443437"
            },
            {
              latitude: "30.502638",
              longitude: "114.440635"
            }
            ,
            {
              latitude: "30.499478",
              longitude: "114.435335"
            }
            ,
            {
              latitude: "30.50002",
              longitude: "114.423009"
            },
            {
              latitude: "30.479808",
              longitude: "114.420928"
            }
          ],
            color: "#FA6400",
            width: 10,
            arrowLine: true,
            borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
          }],
          polygons: [{
            points: [],//给个空数组在页面刚开始渲染的时候会报错，但是不影响使用
            fillColor: "#ffff00",
            strokeColor: "#00B277",
            strokeWidth: 2,
            zIndex: 1
          }],
          gonsArr:[],
    },
//点击地图的时候
bindMap(e) {
    let arr=this.data.gonsArr    //不直接使用polygons[0].points是因为如果不够三个点会报错
    let arr1=this.data.markers   //点击地图添加一个标记点
    let latitude=e.detail.latitude   
    let longitude=e.detail.longitude   
    arr.push({latitude,longitude})   
    arr1.push({
        latitude,
        longitude,
        iconPath: "../../image/map.png",
        id: latitude,
        width: '63rpx',
        height: '88rpx'
    })
    //判断如果标记的点数大于等于3就给polygons[0].points赋值，如果小于3只添加点并且给gonsArr push一下
    if(arr.length>2){
      this.data.polygons[0].points=arr
      this.setData({
        polygons:this.data.polygons,
        markers:arr1,
        gonsArr:arr
      })
    }else{
      this.setData({
        markers:arr1,
        gonsArr:arr
      })
    }
  },
  //清除标记点和面
  clearGon(){
    let arr=this.data.polygons
    arr[0].points=[]
    this.setData({
      polygons:arr,
      markers:[],
      gonsArr:[]
    })
  },

效果：

在地图上随便点几个点，生成如下所示多边形

点击按钮可以清楚多边形。

6、设置圆circle

在地图上显示圆，circle是在map地图上画一个圆，这个圆只需要知道圆心和半径大小即可，属性如表所示：

 wxml

<map  style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers='{{markers}}' polyline='{{polyline}}' 
bindtap="bindMap"  polygons="{{polygons}}" circles="{{circles}}"/>

js

data: {
        latitude: '30.51667',
        longitude: '114.31667',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            callout:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              fontSize: 16,
              textAlign: 'center',
              display: "ALWAYS"
            }
          },
          {
            id:2,
            latitude: '30.51',
            longitude: '114.41',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
              callout:{
                content:"华中科技大学",
                color:"#EE5E7B",
                borderWidth:1,
                borderColor:"#EE5E78",
                borderRadius:5,
                padding:5,
                fontSize: 16,
                textAlign: 'center',
                display: "ALWAYS"
              }
          }
        ],
        polyline: [{
            points: [{
              latitude: "30.506244",
              longitude: "114.448641"
            },
            {
              latitude: "30.503899",
              longitude: "114.443437"
            },
            {
              latitude: "30.502638",
              longitude: "114.440635"
            }
            ,
            {
              latitude: "30.499478",
              longitude: "114.435335"
            }
            ,
            {
              latitude: "30.50002",
              longitude: "114.423009"
            },
            {
              latitude: "30.479808",
              longitude: "114.420928"
            }
          ],
            color: "#FA6400",
            width: 10,
            arrowLine: true,
            borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
          }],
          polygons: [{
            points: [],//给个空数组在页面刚开始渲染的时候会报错，但是不影响使用
            fillColor: "#ffff00",
            strokeColor: "#00B277",
            strokeWidth: 2,
            zIndex: 1
          }],
          gonsArr:[],
          circles:[{
              latitude: '30.51667',
              longitude: '114.31667',
              fillColor:"#FFFFF0",
              radius:10000
            }]
    },

效果如下：

7、设置控件control

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

本来微信小程序的map 里面的 controls控件可以轻松实现，但是官方说要废弃了，说采用 cover-view代替，其实就是一个点击事件。用不用cover-view 都可以的。被误导了一个多小时。

wxml

<map  id="myMap"  show-location="true"  show-compass="true" style="width:100%;height: 600rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers='{{markers}}' polyline='{{polyline}}' bindtap="bindMap"  polygons="{{polygons}}" circles="{{circles}}" controls="{{controls}}"/>
<!-- 这个就是地图上图标的代码 用不用 cover-view  都行的   设置了一个绑定事件 moveTolocation -->
 <view class="viewlistd"  bindtap="moveTolocation">
    <view class="viewlistblock" style="background:none;">
      <view class="viewlittle" style="padding:0;">
        <image src="/image/miaozhun.png" mode="" class="" id="" style="width:120rpx;height:120rpx;"></image>
      </view>
    </view>
</view>
<button type="primary" bindtap="clearGon">清除点或面</button>

js

data: {
        latitude: '30.479049',
        longitude: '114.417156',
        scale: 9,
        markers: [{
            id:1,
            latitude: '30.51667',
            longitude: '114.31667',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
            callout:{
              content:"武汉",
              color:"#EE5E7B",
              borderWidth:1,
              borderColor:"#EE5E78",
              borderRadius:5,
              padding:5,
              fontSize: 16,
              textAlign: 'center',
              display: "ALWAYS"
            }
          },
          {
            id:2,
            latitude: '30.51',
            longitude: '114.41',
            iconPath: "/image/marker1.png",
            width: 30,
            height: 30,
              callout:{
                content:"华中科技大学",
                color:"#EE5E7B",
                borderWidth:1,
                borderColor:"#EE5E78",
                borderRadius:5,
                padding:5,
                fontSize: 16,
                textAlign: 'center',
                display: "ALWAYS"
              }
          }
        ],
        polyline: [{
            points: [{
              latitude: "30.506244",
              longitude: "114.448641"
            },
            {
              latitude: "30.503899",
              longitude: "114.443437"
            },
            {
              latitude: "30.502638",
              longitude: "114.440635"
            }
            ,
            {
              latitude: "30.499478",
              longitude: "114.435335"
            }
            ,
            {
              latitude: "30.50002",
              longitude: "114.423009"
            },
            {
              latitude: "30.479808",
              longitude: "114.420928"
            }
          ],
            color: "#FA6400",
            width: 10,
            arrowLine: true,
            borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
          }],
          polygons: [{
            points: [],//给个空数组在页面刚开始渲染的时候会报错，但是不影响使用
            fillColor: "#ffff00",
            strokeColor: "#00B277",
            strokeWidth: 2,
            zIndex: 1
          }],
          gonsArr:[],
        //   circles:[{
        //       latitude: '30.51667',
        //       longitude: '114.31667',
        //       fillColor:"#FFFFF0",
        //       radius:10000
        //     }],
            controls: [{
                id: 1,
                iconPath: '/resources/location.png',
                position: {
                  left: 0,
                  top: 300 - 50,
                  width: 50,
                  height: 50
                },
                clickable: true
              }],
              mapId: "myMap" //wxml中的map的Id值
    },
    /**
    * 跳转到当前的位置
    */
  moveTolocation: function () {
    //mapId 就是你在 map 标签中定义的 id
    let Id = this.data.mapId
    var mapCtx = wx.createMapContext(Id);
    mapCtx.moveToLocation();
  },

当我们把自己的位置移到外面，如下所示:

此时单击控件，自己的位置就会回到视野中，如下所示：

 

标签：114.31667,入门,微信,30.51667,30,longitude,latitude,组件,id
From： https://www.cnblogs.com/zwh0910/p/17104605.html

相关文章

  • 线程的一些入门知识
    1.创建线程   A.继承Thread父类      重写run方法，在run方法中实现线程的任务            启动线程，调用start方法      B.实现接......
  • Filter_概述与Filter_快速入门
    Filter_概述 Filter：过滤器1.概念生活中的过滤器：净水器，空气净化器，土匪web的过滤器：当访问服务器的资源时，过滤器可以将请求拦......
  • 50行代码完成微信小程序-跳一跳辅助工具，让你成为朋友圈最靓的仔
    前言2017年12月28日，微信更新的6.6.1版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」。不说废话直接上代码设置公共参数 doubleratio=1; //弹跳系数......
  • 810~811 Filtter概述，快速入门
    Filtter：过滤器生活中的过滤器：净水器，土匪，空气净化器web中的过滤器：当访问服务器的资源时，过滤器可以将请求拦截下来，完成一些特殊的功能。过滤器的作用：......
  • React Hooks模拟组件生命周期
    Hooks模拟constructorconstructor(){super()this.state={count:0}}//Hooks模拟constructorconst[countsetCount]=useState(0)Hooks模拟componentDidMountco......
  • 微信小程序主包和分包的资源可以相互引用吗
    了解主包、分包整个小程序所有分包大小不超过20M;单个分包/主包大小不能超过2M主包:a.放置默认启动页面&&tabBar页面,以及一些分包需要用到的公共资源(如wxss、......
  • react中类组件和函数组件的理解？有什么区别
    react中类组件和函数组件的理解？有什么区别一、类组件类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component如果想要访问父组件传递过来......
  • Vue系列---【自定义vue组件发布npm仓库】
    自定义vue组件发布npm仓库参考链接：自定义vue组件发布npm仓库......
  • 微信openid和已有系统的用户绑定2
    1、基本配置：配置接口对应代码：WXPublicUtils是微信提供的java示例中的代码。@RequestMapping(value="/",produces="text/html;charset=UTF-8")@ResponseBodypublic......
  • C++11环境安装【快速入门】
    第一步：安装编译器：https://winlibs.com/ 第二步：解压出来后 第三步：配置环境变量：bin目录 第四步：测试：gcc-v  第五步：关注作者微信公众号......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99