Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6018
Star 91
Fork 164
H
hello uni-app x
提交 29d5fd49 编写于 作者: Anne_LXM's avatar Anne_LXM
浏览文件
操作

调整API下的map迁移至component下

上级 71d8c013
隐藏空白更改
内联 并排
Showing with 464 addition and 510 deletion
pages.json
浏览文件 @ 29d5fd49
...@@ -905,13 +905,6 @@ ...@@ -905,13 +905,6 @@
} }
}, },
// #ifdef WEB // #ifdef WEB
{
"path" : "pages/API/map/map",
"style" :
{
"navigationBarTitleText" : "map"
}
},
{ {
"path" : "pages/API/make-phone-call/make-phone-call", "path" : "pages/API/make-phone-call/make-phone-call",
"style" : "style" :
......
pages/API/map/map.uvue 已删除 100644 → 0
浏览文件 @ 71d8c013
<template>
<view class="content">
<map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
:latitude="location.latitude" :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" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
:include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
@callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
<scroll-view class="scrollview" scroll-y="true">
<button class="button" @click="changeScale">changeScale</button>
<button class="button" @click="addMarkers">addMarkers</button>
<button class="button" @click="addPolyline">addPolyline</button>
<button class="button" @click="addPolygons">addPolygons</button>
<button class="button" @click="addCircles">addCircles</button>
<button class="button" @click="includePoint">includePoints</button>
<button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
<button class="button" @click="handleGetRegion">getRegion</button>
<button class="button" @click="handleTranslateMarker">translateMarker</button>
</scroll-view>
</view>
</template>
<script lang="uts">
type Anchor = {
x : number,
y : number
}
type Callout = {
content : string,
color : string,
fontSize : number,
borderRadius : number,
borderWidth : number,
borderColor : string,
bgColor : string,
padding : string,
display : string
}
type Markers = {
id : string | number,
latitude : number,
longitude : number,
title : string
zIndex : string,
iconPath : string,
rotate ?: number,
width : number,
height : number,
anchor : Anchor,
callout : Callout
}
type Points = {
latitude : number,
longitude : number
}
type Polyline = {
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;
}
type Circles = {
latitude : number;
longitude : number;
radius : number;
strokeWidth : number;
color : string;
fillColor : string;
}
const testMarkers = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
iconPath: '../../../static/location.png',
rotate: 0,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS'
}
},
{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '../../../static/location.png',
width: 40,
height: 40,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius: 2,
borderWidth: 0,
borderColor: '#333300',
bgColor: '#CCFF11',
padding: '1',
display: 'ALWAYS'
}
}
];
const testPolyline = [{
points: [{
latitude: 39.925539,
longitude: 116.279037
},
{
latitude: 39.925539,
longitude: 116.520285
}],
color: '#FFCCFF',
width: 7,
dottedLine: true,
arrowLine: true,
borderColor: '#000000',
borderWidth: 2
},
{
points: [{
latitude: 39.938698,
longitude: 116.275177
},
{
latitude: 39.966069,
longitude: 116.289253
},
{
latitude: 39.944226,
longitude: 116.306076
},
{
latitude: 39.966069,
longitude: 116.322899
},
{
latitude: 39.938698,
longitude: 116.336975
}],
color: '#CCFFFF',
width: 5,
dottedLine: true,
arrowLine: true,
borderColor: '#CC0000',
borderWidth: 3
}
];
const testPolygons = [{
points: [{
latitude: 39.781892,
longitude: 116.293413
},
{
latitude: 39.787600,
longitude: 116.391842
},
{
latitude: 39.733187,
longitude: 116.417932
},
{
latitude: 39.704653,
longitude: 116.338255
}],
fillColor: '#FFCCFF',
strokeWidth: 3,
strokeColor: '#CC99CC',
zIndex: 11
},
{
points: [{
latitude: 39.887600,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.428932
},
{
latitude: 39.887600,
longitude: 116.428932
}
],
fillColor: '#CCFFFF',
strokeWidth: 5,
strokeColor: '#CC0000',
zIndex: 3
}
];
const testCircles = [{
latitude: 39.996441,
longitude: 116.411146,
radius: 15000,
strokeWidth: 5,
color: '#CCFFFF',
fillColor: '#CC0000'
},
{
latitude: 40.096441,
longitude: 116.511146,
radius: 12000,
strokeWidth: 3,
color: '#CCFFFF',
fillColor: '#FFCCFF'
},
{
latitude: 39.896441,
longitude: 116.311146,
radius: 9000,
strokeWidth: 1,
color: '#CCFFFF',
fillColor: '#CC0000'
}
];
const testIncludePoints = [{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
export default {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '../../../static/uni.png',
clickable: true
}],
showLocation: false,
scale: 13,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [] as Polyline[],
markers: [] as Markers[],
polygons: [] as Polygons[],
circles: [] as Circles[],
includePoints: [] as Points[],
rotate: 0,
skew: 0,
map: null as MapContext | null,
// 自动化测试
autoTest: false,
getCenterLocationTest:{},
getRegionTest:{},
}
},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
changeScale() {
this.scale = this.scale == 9 ? 15 : 9;
},
enableThreeD(e) {
this.enable3D = e.detail.value;
},
changeShowCompass(e) {
this.showCompass = e.detail.value;
},
changeEnableOverlooking(e) {
this.enableOverlooking = e.detail.value;
},
changeEnableZoom(e) {
this.enableZoom = e.detail.value;
},
changeEnableScroll(e) {
this.enableScroll = e.detail.value;
},
changeEnableRotate(e) {
this.enableRotate = e.detail.value;
},
changeEnableSatellite(e) {
this.enableSatellite = e.detail.value;
},
changeEnableTraffic(e) {
this.enableTraffic = e.detail.value;
},
addMarkers() {
this.markers = testMarkers;
},
addPolyline() {
this.polyline = testPolyline;
},
addPolygons() {
this.polygons = testPolygons;
},
addCircles() {
this.circles = testCircles;
},
includePoint() {
this.includePoints = testIncludePoints;
},
handleGetCenterLocation() {
this.map!.getCenterLocation({
success: ret => {
console.log(JSON.stringify(ret));
this.getCenterLocationTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleGetRegion() {
this.map!.getRegion({
success: ret => {
console.log(JSON.stringify(ret));
this.getRegionTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleTranslateMarker() {
this.map!.translateMarker({
markerId: 1,
destination: {
latitude: 39.989631,
longitude: 116.481018
},
duration: 2000,
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
maptap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onmarkertap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncontroltap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onupdated(e) {
console.log(JSON.stringify(e))
},
onregionchange(e) {
console.log(JSON.stringify(e));
},
onpoitap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
width: 100%;
height: 250px;
background-color: #f0f0f0;
}
.scrollview {
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
pages/API/map/map.test.js → pages/component/map/map.test.js
浏览文件 @ 29d5fd49
...@@ -8,7 +8,7 @@ describe('web-map', () => { ...@@ -8,7 +8,7 @@ describe('web-map', () => {
return return
} }
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch('/pages/API/map/map') page = await program.reLaunch('/pages/component/map/map')
await page.waitFor('view'); await page.waitFor('view');
// 等待地图加载完成 // 等待地图加载完成
await page.waitFor(4000); await page.waitFor(4000);
......
pages/component/map/map.uvue
浏览文件 @ 29d5fd49
<template> <template>
<view> <view class="content">
<page-head :title="title"></page-head> <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
<view class="uni-common-mt"> :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
<view> :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
<map :latitude="latitude" :longitude="longitude" :markers="covers"> :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
</map> :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
</view> :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
</view> @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
</view> <scroll-view class="scrollview" scroll-y="true">
<button class="button" @click="changeScale">changeScale</button>
<button class="button" @click="addMarkers">addMarkers</button>
<button class="button" @click="addPolyline">addPolyline</button>
<button class="button" @click="addPolygons">addPolygons</button>
<button class="button" @click="addCircles">addCircles</button>
<button class="button" @click="includePoint">includePoints</button>
<button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
<button class="button" @click="handleGetRegion">getRegion</button>
<button class="button" @click="handleTranslateMarker">translateMarker</button>
</scroll-view>
</view>
</template> </template>
<script>
export default { <script lang="uts">
data() { type Anchor = {
return { x : number,
title: 'map', y : number
latitude: 39.909, }
longitude: 116.39742,
covers: [{ type Callout = {
id: 1, content : string,
latitude: 39.9085, color : string,
longitude: 116.39747, fontSize : number,
iconPath: '../../../static/location.png', borderRadius : number,
}, { borderWidth : number,
id: 2, borderColor : string,
latitude: 39.90, bgColor : string,
longitude: 116.39, padding : string,
iconPath: '../../../static/location.png', display : string
}] }
}
} type Markers = {
} id : string | number,
latitude : number,
longitude : number,
title : string
zIndex : string,
iconPath : string,
rotate ?: number,
width : number,
height : number,
anchor : Anchor,
callout : Callout
}
type Points = {
latitude : number,
longitude : number
}
type Polyline = {
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;
}
type Circles = {
latitude : number;
longitude : number;
radius : number;
strokeWidth : number;
color : string;
fillColor : string;
}
const testMarkers = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
iconPath: '../../../static/location.png',
rotate: 0,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS'
}
},
{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '../../../static/location.png',
width: 40,
height: 40,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius: 2,
borderWidth: 0,
borderColor: '#333300',
bgColor: '#CCFF11',
padding: '1',
display: 'ALWAYS'
}
}
];
const testPolyline = [{
points: [{
latitude: 39.925539,
longitude: 116.279037
},
{
latitude: 39.925539,
longitude: 116.520285
}],
color: '#FFCCFF',
width: 7,
dottedLine: true,
arrowLine: true,
borderColor: '#000000',
borderWidth: 2
},
{
points: [{
latitude: 39.938698,
longitude: 116.275177
},
{
latitude: 39.966069,
longitude: 116.289253
},
{
latitude: 39.944226,
longitude: 116.306076
},
{
latitude: 39.966069,
longitude: 116.322899
},
{
latitude: 39.938698,
longitude: 116.336975
}],
color: '#CCFFFF',
width: 5,
dottedLine: true,
arrowLine: true,
borderColor: '#CC0000',
borderWidth: 3
}
];
const testPolygons = [{
points: [{
latitude: 39.781892,
longitude: 116.293413
},
{
latitude: 39.787600,
longitude: 116.391842
},
{
latitude: 39.733187,
longitude: 116.417932
},
{
latitude: 39.704653,
longitude: 116.338255
}],
fillColor: '#FFCCFF',
strokeWidth: 3,
strokeColor: '#CC99CC',
zIndex: 11
},
{
points: [{
latitude: 39.887600,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.428932
},
{
latitude: 39.887600,
longitude: 116.428932
}
],
fillColor: '#CCFFFF',
strokeWidth: 5,
strokeColor: '#CC0000',
zIndex: 3
}
];
const testCircles = [{
latitude: 39.996441,
longitude: 116.411146,
radius: 15000,
strokeWidth: 5,
color: '#CCFFFF',
fillColor: '#CC0000'
},
{
latitude: 40.096441,
longitude: 116.511146,
radius: 12000,
strokeWidth: 3,
color: '#CCFFFF',
fillColor: '#FFCCFF'
},
{
latitude: 39.896441,
longitude: 116.311146,
radius: 9000,
strokeWidth: 1,
color: '#CCFFFF',
fillColor: '#CC0000'
}
];
const testIncludePoints = [{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
export default {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '../../../static/uni.png',
clickable: true
}],
showLocation: false,
scale: 13,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [] as Polyline[],
markers: [] as Markers[],
polygons: [] as Polygons[],
circles: [] as Circles[],
includePoints: [] as Points[],
rotate: 0,
skew: 0,
map: null as MapContext | null,
// 自动化测试
autoTest: false,
getCenterLocationTest:{},
getRegionTest:{},
}
},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
changeScale() {
this.scale = this.scale == 9 ? 15 : 9;
},
enableThreeD(e) {
this.enable3D = e.detail.value;
},
changeShowCompass(e) {
this.showCompass = e.detail.value;
},
changeEnableOverlooking(e) {
this.enableOverlooking = e.detail.value;
},
changeEnableZoom(e) {
this.enableZoom = e.detail.value;
},
changeEnableScroll(e) {
this.enableScroll = e.detail.value;
},
changeEnableRotate(e) {
this.enableRotate = e.detail.value;
},
changeEnableSatellite(e) {
this.enableSatellite = e.detail.value;
},
changeEnableTraffic(e) {
this.enableTraffic = e.detail.value;
},
addMarkers() {
this.markers = testMarkers;
},
addPolyline() {
this.polyline = testPolyline;
},
addPolygons() {
this.polygons = testPolygons;
},
addCircles() {
this.circles = testCircles;
},
includePoint() {
this.includePoints = testIncludePoints;
},
handleGetCenterLocation() {
this.map!.getCenterLocation({
success: ret => {
console.log(JSON.stringify(ret));
this.getCenterLocationTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleGetRegion() {
this.map!.getRegion({
success: ret => {
console.log(JSON.stringify(ret));
this.getRegionTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleTranslateMarker() {
this.map!.translateMarker({
markerId: 1,
destination: {
latitude: 39.989631,
longitude: 116.481018
},
duration: 2000,
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
maptap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onmarkertap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncontroltap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onupdated(e) {
console.log(JSON.stringify(e))
},
onregionchange(e) {
console.log(JSON.stringify(e));
},
onpoitap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script> </script>
<style> <style>
map { .content {
width: 100%; flex: 1;
height: 600rpx; }
}
.map {
width: 100%;
height: 250px;
background-color: #f0f0f0;
}
.scrollview {
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或