map地图组件使用时直接在template中使用<map></map>标签，标签中可嵌套map属性
map最常用到的属性：
-
longitude 中心经度
-
latitude 中心纬度
-
scale 缩放级别（取值范围为5-18,默认的是16 ，值数越大，放大程度越大，看的越细）
-
markers 标记点 （在地图上标记出来的点）
markers属性
id：标记点id (marker点击事件回调会返回此id)
latitude：纬度（范围 -90 ~ 90 ）
longitude：经度（范围 -180 ~ 180 ）
title：标注点名
iconPath： 显示的图标
rotate：旋转角度 （顺时针旋转的角度，范围 0 ~ 360，默认为 0 ）
alpha：标注的透明度 （ 默认1，无透明，范围 0 ~ 1）
width： 标注图标宽度 （默认为图片实际宽度 ）
height：标注图标高度 （默认为图片实际高度 ）
callout：自定义标记点上方的气泡窗口
label：为标记点旁边增加标签
anchor：经纬度在标注图标的锚点marker的 callout属性
content：文本
color： 文本颜色
fontSize：文字大小
borderRadius：callout边框圆角
bgColor：背景色
padding： 文本边缘留白
display： BYCLICK':点击显示;'ALWAYS':常显
textAlign： 文本对齐方式marker的 label属性
content：文本
color： 文本颜色
fontSize：文字大小
x： label的坐标，原点是 marker 对应的经纬度
y： label的坐标，原点是 marker 对应的经纬度
borderWidth： 边框宽度
borderColor： 边框颜色
borderRadius：callout边框圆角
bgColor：背景色
padding： 文本边缘留白
textAlign： 文本对齐方式
- polyline 路线 (可以写两个标记点 然后用路线将它们连接起来)
polyline 属性
points：经纬度数组[{latitude: 0, longitude: 0}]
color：线的颜色
width：线的宽度
dottedLine：是否虚线 ( 默认false )
arrowLine：带箭头的线( 默认false )
arrowIconPath：更换箭头图标(在arrowLine为true时生效)
borderColor：线的边框颜色
- circles 圆
circles属性
latitude：纬度
longitude：经度
color：描边的颜色
fillColor：填充颜色
radius：半径
- controls 控件 (在地图上显示一个控件，但是这个控件并不随着地图移动)
controls 属性
id：控件id (在控件点击事件回调会返回此id)
position：控件在地图的位置 (控件相对地图位置)
iconPath：显示的图标 (项目目录下的图片路径)
clickable：是否可点击 (默认不可点击)
实现如下：
image.png
在template中使用<map></map>标签
<template>
<view>
// latitude 中心经度 longitude 中心纬度 markers 标记点 scale 缩放级别 polyline 路线
<map :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" :polyline="polyline">
<cover-view class="test" @click="getSearch">
<input type="text" placeholder="搜索位置" />
</cover-view>
</map>
</view>
<template>
在data中定义相关属性
data() {
return{
latitude: 34.79977,//纬度
longitude: 113.66072,//经度
scale:13,//缩放级别
compass:true,
// show-compass:true,
// enable-3D:false,
polyline:[
{//指定一系列坐标点，从数组第一项连线至最后一项
points:[
{latitude: 34.79977,longitude: 113.66072},
{latitude: 34.795541,longitude: 113.681646},
],
color:"#0000AA",//线的颜色
width:1,//线的宽度
// dottedLine:true,//是否虚线
arrowLine:true, //带箭头的线 开发者工具暂不支持该属性
}
],
marker: [
{
id:0,
latitude: 34.79977,//纬度
longitude: 113.66072,//经度
iconPath: '', //显示的图标
rotate:0, // 旋转度数
width:10, //宽
height:20, //高
title:'我在这里',//标注点名
alpha:0.5, //透明度
label:{//为标记点旁边增加标签 //因背景颜色H5不支持
content:'Hello,I am here',//文本
color:'red',//文本颜色
// fontSize:24,//文字大小
// x:5,//label的坐标，原点是 marker 对应的经纬度
// y:1,//label的坐标，原点是 marker 对应的经纬度
// borderWidth:12,//边框宽度
// borderColor:'pink',//边框颜色
// borderRadius:20,//边框圆角
// bgColor:'black',//背景色
// padding:5,//文本边缘留白
// textAlign:'right'//文本对齐方式。
},
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'硅谷广场B座',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:2,//边框圆角
bgColor:'#00c16f',//背景颜色
display:'ALWAYS',//常显
},
// anchor:{//经纬度在标注图标的锚点，默认底边中点
// x:0, 原点为给出的经纬度
// y:0,
// }
},
{
id:1,
latitude: 34.79970,//纬度
longitude: 113.64000,//经度
iconPath: '', //显示的图标
rotate:0, // 旋转度数
width:10, //宽
height:20, //高
title:'我在这里',//标注点名
alpha:0.5, //透明度
label:{//为标记点旁边增加标签 //因背景颜色H5不支持
// content:'Hello,I am here',//文本
color:'red',//文本颜色
// fontSize:24,//文字大小
// x:5,//label的坐标，原点是 marker 对应的经纬度
// y:1,//label的坐标，原点是 marker 对应的经纬度
// borderWidth:12,//边框宽度
// borderColor:'pink',//边框颜色
// borderRadius:20,//边框圆角
// bgColor:'black',//背景色
// padding:5,//文本边缘留白
// textAlign:'right'//文本对齐方式。
},
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'硅谷广场旁边',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:2,//边框圆角
bgColor:'#00c16f',//背景颜色
display:'ALWAYS',//常显
},
// anchor:{//经纬度在标注图标的锚点，默认底边中点
// x:0, 原点为给出的经纬度
// y:0,
// }
}
],
}
},
网友评论