Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 8bb42d2f 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

docs: 增加提示信息，格式化代码

上级 f5828da0
隐藏空白更改
内联 并排
Showing with 278 addition and 258 deletion
pages/API/choose-location/choose-location.uvue
浏览文件 @ 8bb42d2f
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40rpx;">
<view class="uni-hello-text uni-center">当前位置信息</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-hello-text uni-center" style="margin-top:10px;">
{{locationAddress}}
</view>
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40rpx;">
<view class="uni-hello-text uni-center">当前位置信息</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-hello-text uni-center" style="margin-top:10px;">
{{locationAddress}}
</view>
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<view class="tips">注意：需要正确配置地图服务商的Key才能正常选择位置</view>
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
</template>
<script lang="uts">
function formatLocation(longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
export default {
data() {
return {
title: 'chooseLocation',
hasLocation: false,
location: {},
locationAddress: ''
}
},
methods: {
chooseLocation: function () {
uni.chooseLocation({
success: (res) => {
console.log(res,123)
this.hasLocation = true,
this.location = formatLocation(res.longitude, res.latitude),
this.locationAddress = res.address
}
})
},
clear: function () {
this.hasLocation = false
}
}
}
function formatLocation (longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
export default {
data () {
return {
title: 'chooseLocation',
hasLocation: false,
location: {},
locationAddress: ''
}
},
methods: {
chooseLocation: function () {
uni.chooseLocation({
success: (res) => {
console.log(res, 123)
this.hasLocation = true
this.location = formatLocation(res.longitude, res.latitude)
this.locationAddress = res.address
}
})
},
clear: function () {
this.hasLocation = false
}
}
}
</script>
<style>
.page-body-info {
padding-bottom: 0;
height: 440rpx;
}
.page-body-info {
padding-bottom: 0;
height: 440rpx;
}
.tips {
font-size: 12px;
margin-top: 15px;
opacity: .8;
}
</style>
pages/API/open-location/open-location.uvue
浏览文件 @ 8bb42d2f
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<form @submit="openLocation">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">经度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">纬度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">位置名称</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">详细位置</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"/>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v uni-common-mt">
<button type="primary" formType="submit">查看位置</button>
</view>
</view>
</form>
</view>
</view>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<form @submit="openLocation">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">经度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">纬度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">位置名称</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="天安门" name="name" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">详细位置</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address" />
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="tips">注意：需要正确配置地图服务商的Key才能正常显示位置</view>
<view class="uni-btn-v uni-common-mt">
<button type="primary" formType="submit">查看位置</button>
</view>
</view>
</form>
</view>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
title: 'openLocation'
}
},
methods: {
openLocation: function (e) {
console.log(e)
var value = e.detail.value
uni.openLocation({
longitude: Number(value.longitude),
latitude: Number(value.latitude),
name: value.name,
address: value.address
})
}
}
}
export default {
data () {
return {
title: 'openLocation'
}
},
methods: {
openLocation: function (e) {
console.log(e)
var value = e.detail.value
uni.openLocation({
longitude: Number(value.longitude),
latitude: Number(value.latitude),
name: value.name,
address: value.address
})
}
}
}
</script>
<style>
.uni-list-cell-left {
padding: 0 30rpx;
}
.uni-list-cell-left {
padding: 0 30rpx;
}
.tips {
font-size: 12px;
margin-top: 15px;
opacity: .8;
}
</style>
pages/component/map/map.uvue
浏览文件 @ 8bb42d2f
<template>
<view class="content">
<map class="map" id="map1" ref="map1" :longitude="location.longitude" :latitude="location.latitude" :scale="scale" :markers="markers" :include-points="includePoints" :polyline="polyline" :polygons="polygons" :circles="circles" :controls="controls" :show-location="showLocation"
:enable-3D="enable3D" :rotate="rotate" :skew="skew"
<map class="map" id="map1" ref="map1" :longitude="location.longitude" :latitude="location.latitude" :scale="scale"
:markers="markers" :include-points="includePoints" :polyline="polyline" :polygons="polygons" :circles="circles"
:controls="controls" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
:show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
:enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
:enable-traffic="enableTraffic"
@markertap="onmarkertap" @callouttap="oncallouttap" @controltap="oncontroltap" @regionchange="onregionchange" @tap="maptap"
@updated="onupdated" @poitap="onpoitap"></map>
:enable-traffic="enableTraffic" @markertap="onmarkertap" @callouttap="oncallouttap" @controltap="oncontroltap"
@regionchange="onregionchange" @tap="maptap" @updated="onupdated" @poitap="onpoitap"></map>
<scroll-view class="scrollview" scroll-y="true">
<view>注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>
<view class="tips">注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</View>
<input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" type="number" @confirm="confirm_scale_input"></input-data>
<input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" type="number"
@confirm="confirm_scale_input"></input-data>
<boolean-data :defaultValue="showLocation" title="开启显示带有方向的当前定位点" @change="change_show_location"></boolean-data>
<button class="button" @click="addControls">控件</button>
......@@ -37,104 +38,104 @@
<script setup lang="uts">
type Anchor = {
x : number,
y : number
x: number,
y: number
}
type Callout = {
content : string,
color : string,
fontSize : number,
borderRadius : number,
borderWidth : number,
borderColor : string,
bgColor : string,
padding : number,
display : string
content: string,
color: string,
fontSize: number,
borderRadius: number,
borderWidth: number,
borderColor: string,
bgColor: string,
padding: number,
display: string
}
type Label = {
content : string,
color : string,
fontSize : number,
x : number,
y : number,
content: string,
color: string,
fontSize: number,
x: number,
y: number,
borderColor: string
borderWidth : number,
borderWidth: number,
borderRadius: number,
bgColor : string,
padding:number
bgColor: string,
padding: number
}
type Markers = {
id : number,
latitude : number,
longitude : number,
title ?: string,
iconPath : string,
zIndex ?: string,
rotate ?: number,
width ?: number,
height ?: number,
label?:Label,
anchor ?: Anchor,
callout ?: Callout
id: number,
latitude: number,
longitude: number,
title?: string,
iconPath: string,
zIndex?: string,
rotate?: number,
width?: number,
height?: number,
label?: Label,
anchor?: Anchor,
callout?: Callout
}
type Points = {
latitude : number,
longitude : number
latitude: number,
longitude: number
}
type Polyline = {
points : Points[],
color : string,
width : number,
dottedLine : boolean,
arrowLine : boolean,
borderColor : string,
borderWidth : number
points: Points[],
color: string,
width: number,
dottedLine: boolean,
arrowLine: boolean,
borderColor: string,
borderWidth: number
}
type Polygons = {
points : Points[];
fillColor : string;
strokeWidth : number;
strokeColor : string;
zIndex : number;
points: Points[];
fillColor: string;
strokeWidth: number;
strokeColor: string;
zIndex: number;
}
type Circles = {
latitude : number;
longitude : number;
radius : number;
strokeWidth : number;
color : string;
fillColor : string;
latitude: number;
longitude: number;
radius: number;
strokeWidth: number;
color: string;
fillColor: string;
}
type PositionType = {
left: number,
top: number,
width: number,
height: number
left: number,
top: number,
width: number,
height: number
}
type ControlsType = {
id?: number;
position: PositionType;
iconPath:string;
clickable?: boolean;
id?: number;
position: PositionType;
iconPath: string;
clickable?: boolean;
}
type TypeJestResult = {
translateMarkerMsg:string,
animationEnd:boolean,
translateMarkerMsg: string,
animationEnd: boolean,
centerPoints: Points,
southwest: Points,
northeast: Points,
moveToLocationMsg:string,
scale:number
moveToLocationMsg: string,
scale: number
}
const testMarkers = [{
......@@ -180,7 +181,7 @@
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius:10,
borderRadius: 10,
borderWidth: 2,
borderColor: '#333300',
bgColor: '#CCFF11',
......@@ -201,7 +202,7 @@
longitude: 116.520285
}],
color: '#FFCCFF',
width:7,
width: 7,
dottedLine: true,
arrowLine: true,
borderColor: '#000000',
......@@ -333,22 +334,22 @@
const jestResult = reactive({
translateMarkerMsg:"",
animationEnd:false,
translateMarkerMsg: "",
animationEnd: false,
centerPoints: {
latitude : 0,
longitude : 0
latitude: 0,
longitude: 0
},
southwest: {
latitude : 0,
longitude : 0
latitude: 0,
longitude: 0
},
northeast: {
latitude : 0,
longitude : 0
latitude: 0,
longitude: 0
},
moveToLocationMsg:"",
scale:0,
moveToLocationMsg: "",
scale: 0,
} as TypeJestResult);
......@@ -361,7 +362,7 @@
scale.value = value
};
const controls = ref([]as ControlsType[]);
const controls = ref([] as ControlsType[]);
const addControls = () => {
controls.value.push({
id: 1,
......@@ -377,7 +378,7 @@
}
const showLocation = ref(false);
const change_show_location = (checked : boolean)=>{
const change_show_location = (checked: boolean) => {
showLocation.value = checked
}
......@@ -395,13 +396,13 @@
const addMarkersLabel = () => {
markers.forEach((marker, index) => {
marker.label = {
content: 'Hello Label'+ (index + 1),
content: 'Hello Label' + (index + 1),
color: '#aa00ff',
fontSize: 12,
x: 5,
y: 0,
borderColor:'#333300',
borderWidth:2,
borderColor: '#333300',
borderWidth: 2,
borderRadius: 20,
bgColor: '#aaffff',
padding: 10
......@@ -439,10 +440,10 @@
const enableSatellite = ref(false);
const enableTraffic = ref(false);
const enableThreeD = (e)=>{
const enableThreeD = (e) => {
enable3D.value = e.detail.value;
}
const changeShowCompass = (e)=>{
const changeShowCompass = (e) => {
showCompass.value = e.detail.value;
}
const changeEnableOverlooking = (e) => {
......@@ -476,7 +477,7 @@
success: ret => {
// console.log('getCenterLocation',ret);
jestResult.centerPoints = ret;
if(!autoTest.value){
if (!autoTest.value) {
uni.showModal({
content: JSON.stringify(ret)
});
......@@ -493,7 +494,7 @@
// console.log('getRegion',JSON.stringify(ret));
jestResult.southwest = ret.southwest;
jestResult.northeast = ret.northeast
if(!autoTest.value){
if (!autoTest.value) {
uni.showModal({
content: JSON.stringify(ret)
});
......@@ -512,8 +513,8 @@
latitude: 39.989631,
longitude: 116.481018
},
autoRotate:true,
rotate:10,
autoRotate: true,
rotate: 10,
duration: 2000,
animationEnd: () => {
// console.log('动画结束');
......@@ -535,17 +536,17 @@
if (map.value) {
map.value.getScale({
success: res => {
// console.log('getScale',res);
scale.value = res.scale
jestResult.scale = res.scale
if(!autoTest.value){
uni.showModal({
content: '当前地图的缩放级别为：'+ res.scale
});
}
// console.log('getScale',res);
scale.value = res.scale
jestResult.scale = res.scale
if (!autoTest.value) {
uni.showModal({
content: '当前地图的缩放级别为：' + res.scale
});
}
},
fail: error => {
console.log(error)
console.log(error)
},
});
}
......@@ -554,61 +555,61 @@
const handleMoveToLocation = () => {
if (map.value) {
map.value.moveToLocation({
latitude: 39.909,
longitude: 116.39742,
success: res => {
// console.log('moveToLocation',res);
jestResult.moveToLocationMsg = res.errMsg;
if(!autoTest.value){
uni.showModal({
content: JSON.stringify(res)
});
}
},
fail: error => {
console.log(error)
latitude: 39.909,
longitude: 116.39742,
success: res => {
// console.log('moveToLocation',res);
jestResult.moveToLocationMsg = res.errMsg;
if (!autoTest.value) {
uni.showModal({
content: JSON.stringify(res)
});
}
},
fail: error => {
console.log(error)
}
});
}
};
const maptap = (e:UniEvent) => {
const maptap = (e: UniEvent) => {
// console.log('点击地图时触发',e)
uni.showModal({
content: JSON.stringify(e)
});
};
const onmarkertap = (e:UniEvent) => {
const onmarkertap = (e: UniEvent) => {
// console.log('点击标记点时触发',e)
uni.showModal({
content: JSON.stringify(e)
});
};
const oncontroltap = (e:UniEvent) => {
const oncontroltap = (e: UniEvent) => {
// console.log('点击控件时触发',e)
uni.showModal({
content: JSON.stringify(e)
});
};
const oncallouttap = (e:UniEvent) => {
const oncallouttap = (e: UniEvent) => {
// console.log('点击标记点对应的气泡时触发',e)
uni.showModal({
content: JSON.stringify(e)
});
};
const onupdated = (e:UniEvent) => {
console.log('在地图渲染更新完成时触发',e)
const onupdated = (e: UniEvent) => {
console.log('在地图渲染更新完成时触发', e)
};
const onregionchange = (e:UniEvent) => {
console.log('视野发生变化时触发',e)
const onregionchange = (e: UniEvent) => {
console.log('视野发生变化时触发', e)
};
const onpoitap = (e:UniEvent) => {
const onpoitap = (e: UniEvent) => {
// console.log('点击地图poi点时触发',e)
uni.showModal({
content: JSON.stringify(e)
......@@ -632,7 +633,6 @@
handleMoveToLocation,
handleGetScale
})
</script>
<style>
......@@ -666,4 +666,10 @@
margin-top: 5px;
margin-bottom: 5px;
}
.tips {
font-size: 12px;
margin-top: 15px;
opacity: .8;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或