Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

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

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