1.uniapp开发map说明
使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台。 使用map地图组件开发，地图组件用于展示地图（使用的时腾讯地图），说一下它的属性有：
longitude（类型为Number，没有默认值，表示中心经度）
latitude（类型为Number，没有默认值，表示中心纬度）
scale（类型为Number，默认值为16，缩放级别取值范围为5-18）
markers（类型为Array数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）
polyline（类型为Array数组，没有默认值，表示路线，数组上的所有点连成线）
circles（类型Array数组，表示圆）
controls（类型Array数组，表示控件）
include-points（类型Array数组，表示缩放视野已包含所有给定的坐标点）
enable-3D（类型为Boolean，默认值为false，表示是否显示3D搂块）
show-compass（类型为Boolean，默认值为false，表示为是否显示指南针）
enable-overlooking（类型为Boolean，默认值为false，表示为是否开启俯视）
enable-satellite（类型为Boolean，默认值为false，表示为是否开启卫星图）
enable-traffic（类型为Boolean，默认值为false，表示为是否开启实时路况）
show-location（类型为Boolean，表示显示带有方向的当前定位点）
polygons（类型Array，表示为多边形）
点击属性
@markertap-表示点击标记点时触发，e.detail={markerId}
@labeltap-表示点击label时触发，e.detail = {markerId}
@callouttap-表示点击标记点对应的气泡时触发，e.detail = {markerId}
@controltap-表示点击控件时触发，e.detail = {controlId}
@regionchange-表示视野发生变化时触发
@tap-表示点击地图时触发App-nuve、微信小程序2.9支持返回经纬度
@updated-表示在地图渲染更新完成时触发
我们在写map组件时，组件的宽/高推荐写直接量，比如说是 750rpx，不要设置百分比值，在uni-app中只支持gcj02坐标。 介绍markers属性-类型为数组Array
由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是：
id，表示标记点id，类型为Number，必填项，marker点击事件回调会返回此id，建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
latitude，纬度，类型Number，必填项，浮点数，范围 -90 ~ 90
longitude，经度，类型Number，必填项，浮点数，范围 -180 ~ 180
title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略
iconPath，显示的图标，类型String，必填项，项目目录下的坦好图片路径
rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0 ~ 1
width，标注图标宽度，类型Number，不是必填，默认为图片实际宽度
height，标注图标高度，类型Number，不是必填，默认为图片实际高度
callout，自定义标记点上方的气泡窗口，类型Object，不是必填 - 可识别换行符
label，为标记点旁边增加标签，类型Object，不是必睁核填 - 可识别换行符
anchor，经纬度在标注图标的锚让早铅点，默认底边中点，不是必填，{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
marker 上的气泡 callout（Object类型） marker数组 上属性 callout 对象使用属性：
content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
borderRadius，callout边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
display，'BYCLICK':点击显示'ALWAYS':常显，String
textAlign，文本对齐方式。有效值: left, right, center，String
marker 上的标签 label（Object类型）
content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
x，label的坐标，原点是 marker 对应的经纬度，Number
y，label的坐标，原点是 marker 对应的经纬度，Number
borderWidth，边框宽度，Number
borderColor，边框颜色，String
borderRadius，边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
textAlign，文本对齐方式。有效值: left, right, center，String
polyline polyline表示指定一系列坐标点，从数组第一项连线至最后一项
points，经纬度数组，类型为Array，必填，如：[{latitude: 0, longitude: 0}]
color，线的颜色，类型为String，不必填，如：#0000AA
width，线的宽度，类型为Number，不必填
dottedLine，是否虚线，类型为Boolean，不必填，默认值false
arrowLine，带箭头的线，类型为Boolean，不必填，默认值为false
arrowIconPath，更换箭头图标，类型为String，不必填，在arrowLine为true时，默认带箭头的线时生效
borderColor，线的边框颜色，类型为String，不必填
borderWidth，线的厚度，类型为Number，不必填
polygon polygon指定一系列坐标点，根据points坐标数据生成闭合多边形
points，经纬度数组，array，必填，如：[{latitude: 0, longitude: 0}]
strokeWidth，描边的宽度，Number，否
strokeColor 描边的颜色，String，否
fillColor，填充颜色，String，否
zIndex，设置多边形 Z 轴数值，Number，否
circles circles在地图上显示圆
latitude，纬度，Number，必填，浮点数，范围 -90 ~ 90
longitude，经度，Number，必填，浮点数，范围-180 ~ 180
color，描边的颜色，String，不必填，如：#0000AA
fillColor，填充颜色，String，不必填，如：#0000AA
radius，半径，Number，必填
strokeWidth，描边的宽度，Number，不必填
controls controls在地图上显示控件，控件不随着地图移动
id，控件id，Number，不必填，在控件点击事件回调会返回此id
position，控件在地图的位置，Object，必填，控件相对地图位置
iconPath，显示的图标，String，必填，项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径
clickable，是否可点击，Boolean，不必填，默认不可点击
position
left，距离地图的左边界多远，Number，不必填，默认为0
top，距离地图的上边界多远，Number，不必填，默认为0
width，控件宽度，Number，不必填，默认为图片宽度
height，控件高度，Number，不必填，默认为图片高度
注意在uniapp中地图组件的经纬度必填，如果不填，经纬度则默认值是北京的经纬度。 2.uniapp使用map组件 基本使用方法 使用uniapp开发中的map组件，基本使用方法：
代码如下（示例）：
<map :scale="scale" style="width: 100%height: 100%"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" show-location="false"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>
markers属性的使用，代码如下（示例）：
markers: [{
id: 1, // Number
title: '1', // String-标注点名
rotate: 180, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha: 0.5, // 默认1，无透明，范围 0 ~ 1
latitude: 39.899,
longitude: 116.39742,
width: 30,
height: 30,
// callout: {
// display: "BYCLICK",
// padding: 10,
// borderRadius: 5,
// content: '',
// },
// anchor: {},
iconPath: '../../../static/location.png', // 显示的图标
}, {
id: 2,
title: '2', // String
latitude: 39.90,
longitude: 116.39,
callout: {
color: '#007AFF', // 文本颜色
bgColor: '#563BFF', // 背景色
display: "ALWAYS", // 'BYCLICK':点击显示'ALWAYS':常显
fontSize: 15,
textAlign: 'left', // 文本对齐方式。有效值: left, right, center
padding: 10, // 文本边缘留白
borderRadius: 5,
content: '腾讯地图',
},
label: {
content: 'Jeskson',
color: '#000000',
fontSize: 12,
borderWidth: 12,
borderColor: '#007AFF',
borderRadius: 5,
padding: 5,
textAlign: 'center',
bgColor: '#563BFF',
},
iconPath: '../../../static/location.png'
}]
这里贴下主要代码介绍下：先是wxml文件：
<map id='parkingMap' class='mp_map' longitude="{{lon}}" latitude="{{lat}}" scale='14' markers='{{markers}}' controls='{{controls}}' bindcontroltap='controltap' bindmarkertap='markertap' show-location='true' bindregionchange='regionchange' bindtap='clickOther'> 1
标签里的属手态性API文档里都有介绍，应该没什么好说的了；
可以看到在地图上有标记p，点击需要有提示信息，查了下微信map上毕纯源面无法在继续添加覆盖物，然后看了API文档有个cover-view，于是就用这个来做了个提示信息：
<cover-view class='parkingName'>{{parkingName}}</cover-view>
<cover-view class='space'>
<cover-view class='裤拦totalNum'>总车位：<cover-view style='color:red'>{{totalNum}}</cover-view></cover-view>
<cover-view class='leftNum'>剩余车位：<cover-view style='color:red'>{{leftNum}}</cover-view></cover-view>
</cover-view>
</cover-view>
<cover-view class='right'>
<cover-image src='../../image/arrow_right.png' class='arrow'></cover-image>
</cover-view>
</cover-view>
123456789101112131415
注意这里是要添加到map标签里面：<map><cover-view></cover-view></map>
加了个if判断，点击地图上的P才显示；
js文件：
初始化data：
//定义全局变量var longitude, latitude, mapCtxvar centerLongitude, centerLatitude, windowWidth, windowHeight /**
* 页面的初始数据
*/
data: {
lon: '',
lat: '',
is_show: false,
parkingName:'',
totalNum:'',
leftNum:'',
markers: [],
controls: []
},12345678910111213141516
首先是获取定位，使用微信小程序API提供的方式：
getloca:function(){
var that = this
var time
wx.getLocation({
type: "wgs84 ",
success: function (res) {
console.log(res.latitude)
console.log(res.longitude)
latitude = res.latitude
longitude = res.longitude
centerLatitude = latitude
centerLongitude = longitude
that.setData({
lat: res.latitude,
lon: res.longitude,
})
},
fail: function (res) {
}
})
},1234567891011121314151617181920212223
在实际测试中，发现有的android机掉用改API就是无法定位，测试过所需要的权限都有，最后尝试了下百度地图，居然发现成功了，一下是百度地图定位（具体可以查看百度地图小程序API）的方式：
//引入百度地图apivar bmap = require('../../libs/bmap-wx.min.js')//百度api定位我的位置
getLocaByBM:function(){
var that = this var BMap = new bmap.BMapWX({
ak: '你自己申请的ak'
}) var fail = function (data) {
console.log(data)
} var success = function (data) {
wxMarkerData = data.wxMarkerData
console.log(wxMarkerData)
centerLatitude = wxMarkerData[0].latitude
centerLongitude = wxMarkerData[0].longitude
that.setData({
markers: wxMarkerData
})
that.setData({
lat: wxMarkerData[0].latitude
})
that.setData({
lon: wxMarkerData[0].longitude
})
}//好像必须要加这个
BMap.regeocoding({
fail: fail,
success: success,
iconPath: '../../image/center.png',
iconTapPath: '../../img/center.png',
width:23,
height:40
})
},12345678910111213141516171819202122232425262728293031323334353637
好吧，这次的测试结果苹果，小米，华为，三星均能正常定位了；希望微信以后能改善这个问题吧。
不过这里需要注意一个问题，小程序是基于腾讯地图（使用火星坐标），百度地图定位出来的坐标需要转换才能正确的标识，文末会贴出转换的代码；
下面是map的 *** 作了，常见的几种添加markers，controls，地图移动时的监听处理；
先介绍地图移动的监听处理：
这里可以结合微信API文档来看会更清晰（文笔不好，写的有些乱），先获取map对象：
安卓机：marker的图片80%透明， 设置了label字段，游老位于marker的图片中间问题1：文本颜色不一致，有的文本在图片亏磨厅上面(高亮色，例如25，1)，有的销隐文本在图片下面(非高亮色，除25，1之外)
问题1：点击文本 不触发 clickMarkertap事件（有时触发，有时不触发，得多点几次）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）