# Map 地图

请扫码查看示例

# 介绍

地图，可以通过滑动平移地图。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-map" src="../../../../node_modules/@minix-iot/mui/src/map/index"></element>
<m-map center-latitude="23.03" center-longitude="113.06" center-zoom="14" @m-marker-pick="onMarkerPick" @m-point-pick="onPointPick"></m-map>

1
2

import prompt from '@system.prompt'
export default {
  onMarkerPick(e) {
    prompt.showToast({
      message: "点击了marker" + e.detail
    })
  },
  onPointPick(e) {
    prompt.showToast({
      message: "点击了POINT:" +JSON.stringify(e.detail),
      duration: 4000,
    });
  }
}

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

# Api

# Prop

字段	说明	类型	默认值	是否必须
`width`	地图宽度	`String`	`100%`	`否`
`height`	地图高度	`String`	`100%`	`否`
`center-latitude`	中心点纬度	`Number`	-	`否`
`center-longitude`	中心点经度	`Number`	-	`否`
`center-zoom`	地图缩放级别，取值范围：`4-21`	`Number`	-	`否`
`markers`	标记	`Array`	`[]注1`	`是`

注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

# Events

名称	说明	回调参数
`m-point-pick`	点击地图的某个点触发	`{}注2`
`m-marker-pick`	点击地图标记触发	`{}注3`

注2

{
  platform: 'baidu' //默认是百度地图返回的信息
  province: '', // （仅安卓支持）省名字
  city: '', // （仅安卓支持）城市名字
  district: '', // （仅安卓支持）区域名字
  latitude: '', //纬度
  longitude: '' //经度
}

1
2
3
4
5
6
7
8

注3

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

1
2
3
4