map 地图
- 属性说明
- 示例
  - 代码示例 1
  - 代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角
- marker
  - 属性说明
  - 示例
- polyline
  - 属性说明
  - 示例
- polygon
  - 属性说明
  - 示例
- circle
  - 属性说明
  - 示例
- control
  - 属性说明
  - 示例
- Bug & Tip

map 地图

解释：地图。客户端创建的原生组件，使用时请注意相关限制。

属性说明

属性名	类型	默认值	必填	说明	最低版本	Web 态说明
longitude	Number	北京经度	是	gcj02 坐标系中心经度	–	–
latitude	Number	北京纬度	是	gcj02 坐标系中心纬度	–	–
scale	Number	16	否	缩放级别，取值范围为 4-21 。动态设置 scale 值用法：`scale=”{= scale =}”`	–	–
markers	Array.<marker>		否	标记点。详情请参考 marker	–	–
polyline	Array.<polyline>		否	路线。详情请参考 polyline	–	–
polygons	Array.<polygon>		否	多边形（工具暂不支持）。详情请参考 polygon	2.0.13 低版本请做兼容性处理	–
circles	Array.<circle>		否	圆。详情请参考 circle	–	–
controls	Array.<control>		否	控件。详情请参考 control	–	–
include-points	Array.<point>		否	缩放视野以包含所有给定的坐标点	–	–
show-location	Boolean	false	否	显示带有方向的当前定位点	–	暂时不能显示方向
enable-3D	Boolean	false	否	显示 3D 楼块（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
show-compass	Boolean	false	否	显示指南针（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
enable-overlooking	Boolean	false	否	开启俯视（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
enable-zoom	Boolean	true	否	是否支持缩放（工具暂不支持）	2.0.13 低版本请做兼容性处理	–
enable-scroll	Boolean	true	否	是否支持拖动（工具暂不支持）	2.0.13 低版本请做兼容性处理	–
enable-rotate	Boolean	false	否	是否支持旋转（工具暂不支持）	2.0.13 低版本请做兼容性处理	暂不支持
bindmarkertap	EventHandle		否	点击标记点时触发	–	–
bindcallouttap	EventHandle		否	点击标记点对应的气泡时触发	–	–
bindcontroltap	EventHandle		否	点击控件时触发	–	–
bindregionchange	EventHandle		否	视野发生变化时触发	–	–
bindtap	EventHandle		否	点击地图时触发	–	–
bindupdated	EventHandle		否	在地图渲染更新完成时触发	–	–
bindpoitap	EventHandle		否	点击地图 poi 点时触发	–	暂不支持

示例

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <map class="map"

   longitude="{{longitude}}"

   latitude="{{latitude}}"

   scale="{{scale}}"

   markers="{{markers}}"

   polyline="{{polyline}}"

   polygons="{{drawPolygon ? polygons : []}}"

   circles="{{circles}}"

   controls="{{controls}}"

   show-location="{{showLocation}}"

   include-points="{{includePoints}}"

   enable-3D="{{enable3d}}"

   show-compass="{{showCompass}}"

   enable-overlooking="{{enableOverlooking}}"

   enable-zoom="{{enableZoom}}"

   enable-scroll="{{enableScroll}}"

   enable-rotate="{{enableRotate}}"

   bindmarkertap="onMarkertap"

   bindcallouttap="onCallouttap"

   bindcontroltap="onControltap"

   bindregionchange="onRegionchange"

   bindtap="onTap" 

   bindupdated="onUpdated"

   bindpoitap="onPoitap">

   </map>

   <view class="item-scroll block border-bottom">

   <text class="switch-text">支持缩放</text>

   <switch bindchange="toggleZoom" checked></switch>

   </view>

   <view class="item-scroll block border-bottom">

   <text class="switch-text">支持拖动</text>

   <switch bindchange="toggleScroll" checked></switch>

   </view>

   <view class="item-scroll block border-bottom" s-if="{{!isWeb}}">

   <text class="switch-text">支持旋转</text>

   <switch bindchange="toggleRotate" checked></switch>

   </view>

   </view>

   <view class="tip-week">工具暂不支持手势控制</view>

  </view>


 

  Page({

   data: {

   latitude: '40.048828',

   longitude: '116.280412',

   scale: 16,

   isWeb: false,

   polygons: [],

   drawPolygon: false,

   includePoints: [],

   showLocation: false,

   enable3d: false,

   showCompass: false,

   enableOverlooking: false,

   enableZoom: true,

   enableScroll: true,

   enableRotate: true,

   markers: [{

   markerId: '1',

   latitude: '40.052751',

   longitude: '116.278796'

   }, {

   markerId: '2',

   latitude: '40.048828',

   longitude: '116.280412',

   title: 'markerId: 2',

   zIndex: 100,

   iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/demo_location.png',

   rotate: 0,

   width: 30,

   height: 50,

   callout: {

   display: 'ALWAYS',

   content: '百度科技园',

   color: '#000',

   fontSize: '16',

   borderRadius: 50,

   bgColor: '#5B9FFF',

   padding: 2,

   textAlign: 'center'

   }

   }, {

   markerId: '3',

   latitude: '40.049655',

   longitude: '116.27505',

   callout: {

   display: 'ALWAYS',

   content: '西山壹号院'

   }

   }],

   polyline: [{

   points: [{

   longitude: 116.278796,

   latitude: 40.048828

   }, {

   longitude: 116.27505,

   latitude: 40.049655

   }],

   color: '#FF5F41FF',

   width: 2,

   dottedLine: true

   }],

   controls: [{

   controlId: 1,

   iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png',

   position: {

   left: 0,

   top: 100,

   width: 50,

   height: 50

   },

   clickable: true

   }],

   circles: [{

   latitude: '40.052751',

   longitude: '116.278796',

   color: '#FF5F41FF',

   fillColor: '#21FFFFFF',

   radius: '200',

   strokeWidth: '2'

   }]

   },

   showLocation() {

   this.setData({

   showLocation: !this.data.showLocation

   });

   },

   toggle3d() {

   this.setData({

   enable3d: !this.data.enable3d

   });

   },

   toggleShowCompass() {

   this.setData({

   showCompass: !this.data.showCompass

   });

   },

   toggleOverlooking() {

   this.setData({

   enableOverlooking: !this.data.enableOverlooking

   });

   },

   toggleZoom() {

   this.setData({

   enableZoom: !this.data.enableZoom

   });

   },

   toggleScroll() {

   this.setData({

   enableScroll: !this.data.enableScroll

   });

   },

   toggleRotate() {

   this.setData({

   enableRotate: !this.data.enableRotate

   });

   },

   togglePolygon() {

   this.setData({

   drawPolygon: !this.data.drawPolygon

   });

   },

   onMarkertap(e) {

   console.log('onMarkertap callback:', e);

   },

   onCallouttap(e) {

   console.log('onCallouttap callback:', e);

   },

   onControltap(e) {

   console.log('onControltap callback:', e);

   },

   onRegionchange(e) {

   console.log('onRegionchange callback:', e);

   },

   onTap(e) {

   console.log('onTap callback:', e);

   },

   onUpdated(e) {

   console.log('onUpdated callback:', e);

   },

   onPoitap(e) {

   console.log('onPoitap callback:', e);

   },

  

   /**

   * 点击标记点时触发的事件

   */ 

   bindmarkertap() {

   swan.showToast({

   title: '点击标记啦',

   icon: 'none'

   });

   },

  });

代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角

在开发者工具中打开

在 WEB IDE 中打开

SWAN
CSS


 

  <view class="wrap">

   <cover-view class="card-area">

   <map

   longitude="{{longitude}}"

   latitude="{{latitude}}">

   </map>

   </cover-view>

  </view>


 

  .card-area { 

   width: 3.88rem;

   height: 2.18rem;

  }

marker

解释：标记点，用于在地图上显示标记的位置。

属性说明

属性名	说明	类型	必填	备注
markerId	标记点 id	Number	否	marker 点击事件回调会返回此 id 。建议为每个 marker 设置 Number 类型的 id ，保证更新 marker 时有更好的性能
latitude	纬度	Number	是	浮点数，范围 -90~90
longitude	经度	Number	是	浮点数，范围 -180~180
zIndex	显示层级	Number	否	iOS 地图不支持设置此属性
iconPath	显示的图标	String	是	项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法
rotate	旋转角度	Number	否	默认为 0 ，顺时针旋转的角度，范围 0~360
alpha	标注的透明度	Number	否	默认为 1 ，无透明，范围 0~1
width	标注图标宽度	Number	否	默认为图片实际宽度
height	标注图标高度	Number	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符
label	为标记点旁边增加标签。暂不支持换行	Object	否	支持的属性见下表，可识别换行符
anchor	经纬度在标注图标的锚点	Object	否	默认底边中点，`{x, y}`：x 表示横向（0-1），y 表示竖向（0-1）。`{x: .5, y: 1}`表示底边中点

callout 属性说明

属性名	说明	类型	备注
content	文本	String
color	文本颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fontSize	文字大小	Number
borderWidth	边框宽度	Number
borderColor	边框颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderRadius	callout 边框圆角	Number
bgColor	背景色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
padding	文本边缘留白	Number
display	‘BYCLICK’：点击显示；’ALWAYS’：常显	String	默认为常显
textAlign	文本对齐方式。有效值：left、right、center	String	默认为居中对齐

label 属性说明

属性名	说明	类型	备注
content	文本	String
color	文本颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fontSize	文字大小	Number
x	label 的坐标，原点是 marker 对应的经纬度	Number
y	label 的坐标，原点是 marker 对应的经纬度	Number
borderWidth	边框宽度	Number
borderColor	边框颜色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderRadius	边框圆角	Number
bgColor	背景色	String	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
padding	文本边缘留白	Number
textAlign	文本对齐方式。有效值：left、right、center	String	默认为居中对齐

示例

图片示例

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS


 

  <view class="wrap">

   <map

   style="width: 100%; height: 300px;"

   longitude="{{longitude}}"

   latitude="{{latitude}}"

   markers="{{markers}}"

   bindmarkertap="bindmarkertap"

   bindcallouttap="bindcallouttap">

   </map>

  </view>


 

  Page({

   data: {

   latitude: 40.048828,

   longitude: 116.280412,

   markers: [{

   markerId: 1,

   latitude: 40.048828,

   longitude: 116.280412,

   title: 'markerId: 1',

   zIndex: 100,

   iconPath: '../images/location.png',

   rotate: 90,

   callout: {

   display: 'ALWAYS',

   content: '百度科技园',

   color: '#000',

   fontSize: '16',

   borderRadius: 50,

   bgColor: '#5B9FFF',

   padding: 2,

   textAlign: 'center'

   }

   }, {

   markerId: 2,

   latitude: 40.049655,

   longitude: 116.27505,

   title: 'markerId: 2',

   zIndex: 100,

   rotate: 90,

   alpha: 0.5,

   width: 30,

   height: 50,

   label: {

   'content': 'label',

   'color': '#7B68EE',

   'fontSize': 16,

   'borderWidth': 1,

   'borderColor': '#5B9FFF',

   'borderRadius': 50,

   'bgColor': '#ADCFFF',

   'padding': 5,

   'textAlign': 'center'

   },

   anchor: {x: .5, y: 1},

   callout: {

   display: 'BYCLICK',

   content: '西山壹号院',

   color: '#FFF',

   fontSize: '16',

   borderRadius: 50,

   bgColor: '#5B9FFF',

   padding: 2,

   textAlign: 'center'

   }

   }]

   },

   bindmarkertap() {

   swan.showToast({

   title: '点击标记啦',

   icon: 'none'

   });

   },

   bindcallouttap() {

   swan.showToast({

   title: '点击标记上方气泡啦',

   icon: 'none'

   });

   }

  });

polyline

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

属性说明

属性名	说明	类型	必填	备注
points	经纬度数组	Array	是	`[{latitude: 0, longitude: 0}]`
color	线的颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认 false
arrowLine	带箭头的线	Boolean	否	默认 false
arrowIconPath	更换箭头图标	String	否	在 arrowLine 为 true 时生效
borderColor	线的边框颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
borderWidth	线的厚度	Number	否

示例

图片示例

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS


 

  <view class="wrap">

   <map

   style="width: 100%; height: 300px;"

   longitude="{{longitude}}"

   latitude="{{latitude}}"

   polyline="{{polyline}}">

   </map>

  </view>


 

  Page({

   data: {

   latitude: 40.048828,

   longitude: 116.280412,

   polyline: [{

   points: [{

   longitude: 116.278796,

   latitude: 40.048828

   }, {

   longitude: 116.27505,

   latitude: 40.049655

   }],

   color: '#000000AA',

   width: 2,

   dottedLine: true,

   arrowLine: true,

   // arrowIconPath: '开发者服务器图片路径',

   borderColor: '#FFB6C1',

   borderWidth: 5

   }]

   }

  });

polygon

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

属性说明

属性名	说明	类型	必填	备注
points	经纬度数组	Array	是	`[{latitude: 0, longitude: 0}]`
strokeWidth	描边的宽度	Number	否
strokeColor	描边的颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fillColor	填充颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
zIndex	设置多边形 Z 轴数值	Number	否

示例

图片示例

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS


 

  <view class="wrap">

   <map

   style="width: 100%; height: 300px;"

   longitude="{{longitude}}"

   latitude="{{latitude}}"

   polygons="{{polygons}}">

   </map>

  </view>


 

  Page({

   data: {

   latitude: 40.048828,

   longitude: 116.280412,

   polygons: [{

   points: [{

   longitude: 116.278796,

   latitude: 40.048828

   }, {

   longitude: 116.27505,

   latitude: 40.049655

   },{

   longitude: 116.27305,

   latitude: 40.050655

   },{

   longitude: 116.27105,

   latitude: 40.051655

   }],

   strokeWidth: 1,

   strokeColor: '#000000AA',

   fillColor: '#000000AA',

   zIndex: 20

   }]

   }

  });

circle

解释：在地图上显示圆

属性说明

属性名	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90~90
longitude	经度	Number	是	浮点数，范围 -180~180
color	描边的颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
fillColor	填充颜色	String	否	8 位十六进制表示，最后 2 位表示 alpha 值（可省略）
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否

示例

图片示例

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS


 

  <view class="wrap">

   <map

   style="width: 100%; height: 300px;"

   longitude="{{longitude}}"

   latitude="{{latitude}}"

   circles="{{circles}}">

   </map>

  </view>


 

  Page({

   data: {

   scale: 16,

   latitude: 40.048828,

   longitude: 116.280412,

   circles: [{

   latitude: 40.052751,

   longitude: 116.278796,

   color: '#FF5F41FF',

   fillColor: '#FF5F41FF',

   radius: 200,

   strokeWidth: 2

   }]

   }

  });

control

解释：在地图上显示控件，控件不随着地图移动。

属性说明

属性名	说明	类型	必填	备注
controlId	控件 id	Number	否	在控件点击事件回调会返回此 id
position	控件在地图的位置	Object	是	控件相对地图位置
iconPath	显示的图标	String	是	项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法
clickable	是否可点击	Boolean	否	默认不可点击

position 属性说明

属性名	说明	类型	必填	备注
left	距离地图的左边界多远	Number	否	默认为 0
top	距离地图的上边界多远	Number	否	默认为 0
width	控件宽度	Number	否	默认为图片宽度
height	控件高度	Number	否	默认为图片高度

示例

图片示例

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS


 

  <view class="wrap">

   <map

   style="width: 100%; height: 300px;"

   longitude="{{longitude}}"

   latitude="{{latitude}}"

   controls="{{controls}}"

   bindcontroltap="bindcontroltap"

   >

   </map>

  </view>


 

  Page({

   data: {

   latitude: 40.048828,

   longitude: 116.280412,

   controls: [{

   controlId: 1,

   iconPath: '/images/navigate.png',

   position: {

   left: 0,

   top: 100,

   width: 50,

   height: 50

   },

   clickable: true

   }]

   },

   bindcontroltap() {

   swan.showToast({

   title: '点击控件',

   icon: 'none'

   })

   }

  });

Bug & Tip

Tip：map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
Tip：请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件。
Tip：CSS 动画对 map 组件无效。
Tip：cover-view、cover-image 组件可覆盖在 map 组件之上。
Tip：Android 与 iOS 定位精度不同，双端定位存在差异。
Tip：map 组件使用的经纬度是火星坐标系，调用 swan.getLocation 接口需要指定 type 为 gcj02 。
Tip：开发者工具由于坐标系不同，定位与客户端存在差异。开发时请以客户端为准。
Bug：Web 态由于坐标系不同，定位与客户端存在差异，坐标与客户端相比有一定偏移。待后续版本修复。

九八云百度小程序教程：map 地图

map 地图

属性说明

示例

代码示例 1

代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角

marker

属性说明

示例

polyline

属性说明

示例

polygon

属性说明

示例

circle

属性说明

示例

control

属性说明

示例

Bug & Tip

相关推荐

评论抢沙发

攻防案列

map 地图

属性说明

示例

代码示例 1

代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角

marker

属性说明

示例

polyline

属性说明

示例

polygon

属性说明

示例

circle

属性说明

示例

control

属性说明

示例

Bug & Tip

相关推荐

评论 抢沙发

攻防案列

评论抢沙发