# midea-map-view 地图

请扫码查看示例

# 介绍

地图

# 引入

APP 内置组件，可直接使用 cross-view 标签。

# 代码演示

# 基本用法

通过设置 crossprops 和 type 属性,展示地图。

<cross-view
  type="midea-map-view"
  crossprops="{{mapData}}"
  onCallMethod="onCallMethod"
></cross-view>

1
2
3
4
5

import prompt from '@system.prompt'
export default {
  data: {
    mapData: JSON.stringify({
      center: {
        latitude: 23.03,
        longitude: 113.06,
        zoom: 10,
      },
      markers: [
        {
          icon: {
            normal: 'common/images/ic_me_purchased_items.png', //标记的图片地址
            click: 'common/images/logo.png', //标记点击后的图片地址
          },
          list: [
            { latitude: 23.03, longitude: 113.06, id: 1 },
            { latitude: 22.32, longitude: 114.03, id: 2 },
          ],
        },
      ],
      overlay: {
        latitude: 23.03, //围栏中心点纬度
        longitude: 113.06, //围栏中心点经度
        radius: 30000, //围栏的半径（单位米，要求大于0）
        customID: 23412, //用户自定义ID，可选
        fillColor: '#000000', //围栏的填充颜色
        strokeColor: '#666666', //围栏的边框颜色
        lineWidth: '2.0', //围栏边框宽度
      },
    }),
  },

  /**
   * 原生回调方法
   */
  onCallMethod({ method, params }) {
    if (method) {
      switch (method) {
        case 'markerPick':
          {
            prompt.showToast({
              message: '点击了marker id:' + JSON.stringify(params),
            })
          }
          break
        case 'pointPick':
          {
            prompt.showToast({
              message: '点击了地图位置:' + JSON.stringify(params),
            })
          }
          break
      }
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# Api

# Prop

字段	说明	类型	默认值	是否必须
`type`	原生组件类型	`String`	`midea-map-view`	`是`
`crossprops`	参数	`Object`	`{}附表1`	`是`

# crossprops（表 1）

字段	说明	类型	默认值	是否必须
`center`	中心点	`Object`	`{}`	`是`
`center{latitude}`	纬度	`Number`	-	`是`
`center{longitude}`	经度	`Number`	-	`是`
`center{zoom}`	地图缩放级别，取值范围：`4-21`	`Number`	-	`否`
`markers`	标记	`Array`	`[]注1`	`是`
`overlay`	围栏 `仅iOS支持`	`Object`	`{}`	`否`
`overlay{latitude}`	中心点纬度	`Number`	-	`是`
`overlay{longitude}`	中心点经度	`Number`	-	`是`
`overlay{radius}`	半径，单位(米)	`Number`	-	`是`
`overlay{customID}`	用户自定义 ID	`Number`	-	`否`
`overlay{fillColor}`	填充颜色	`String`	-	`是`
`overlay{strokeColor}`	边框颜色	`String`	-	`是`
`overlay{lineWidth}`	边框宽度	`String`	-	`是`

注 1

markers: [
  {
    icon: {
      // 标记图片的数据
      normal: 'https://…….png', //标记的图片地址
      click: 'https://……/images/logo.png', //标记点击后的图片地址
    },
    list: [
      // 标记经纬度的数据
      { latitude: 23.03, longitude: 113.06, id: 1 },
      { latitude: 22.32, longitude: 114.03, id: 2 },
    ],
  },
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Events

名称	说明	回调参数
`onCallMethod`	原生回调成功触发	`{method, params}`附表 2

# method 回调方法（表 2）

方法名称	说明	回调参数
`markerPick`	点击地图标记触发	`注2`
`pointPick`	点击地图的某个点触发	`注3`

注 2

{
  status: 0, //0获取成功
  id: xxx //设置标记的id值
}

1
2
3
4

注 3

{
  platform: 'baidu' //默认是百度地图返回的信息
  province: '', //省名字
  city: '', // 城市名字
  cityCode: '',  // 城市编号
  district: '', // 区域名字
  latitude: '', //纬度
  longitude: '' //经度
}

1
2
3
4
5
6
7
8
9