提交 dcc5f9b9 编写于 作者: Shine-zwj's avatar Shine-zwj

update:地图定位组件

上级 94661cdf
.app-mob-map-page { .app-map {
.app-map {
width: 100vw; width: 100vw;
height: 100vh !important; height: calc(100vh - 104px) !important;
.amap-geolocation-con{
position: fixed !important;
z-index: 9999 !important;
right: 10px !important;
bottom: 20px !important;
}
.amap-logo {
position: fixed !important;
z-index: 9999 !important;
bottom: 0px !important;
}
.amap-copyright {
position: fixed !important;
z-index: 9999 !important;
bottom: 0px !important;
} }
} }
<template> <template>
<ion-page class="app-mob-map-page"> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
...@@ -39,7 +39,8 @@ ...@@ -39,7 +39,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { AMapManager } from 'vue-amap'; import { AMapManager } from 'vue-amap';
import { Vue, Component, Prop, Watch } from "vue-property-decorator"; import { appConfig } from '@/config/appConfig';
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({ @Component({
components: { components: {
...@@ -93,7 +94,7 @@ export default class AppMobMapPage extends Vue { ...@@ -93,7 +94,7 @@ export default class AppMobMapPage extends Vue {
* @type {*} * @type {*}
* @memberof AppMobMapPage * @memberof AppMobMapPage
*/ */
public center: any[] = [104.067836, 30.606631]; public center: any[] = appConfig.defaultAddress.position;
/** /**
* 地图标点信息(无定位默认标点) * 地图标点信息(无定位默认标点)
...@@ -102,8 +103,8 @@ export default class AppMobMapPage extends Vue { ...@@ -102,8 +103,8 @@ export default class AppMobMapPage extends Vue {
* @memberof AppMobMapPage * @memberof AppMobMapPage
*/ */
public marker: any = { public marker: any = {
position: [104.067836, 30.606631], position: appConfig.defaultAddress.position,
address: '四川省成都市武侯区桂溪街道天府大道北段成都南站', address: appConfig.defaultAddress.address,
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
visible: false visible: false
}; };
...@@ -141,10 +142,10 @@ export default class AppMobMapPage extends Vue { ...@@ -141,10 +142,10 @@ export default class AppMobMapPage extends Vue {
public plugin = [{ public plugin = [{
maximumAge: 0, //定位结果缓存0毫秒,默认:0 maximumAge: 0, //定位结果缓存0毫秒,默认:0
buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角 buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
showButton: false, //显示定位按钮,默认:true showButton: true, //显示定位按钮,默认:true
showMarker: false, //定位成功后在定位到的位置显示点标记,默认:true showMarker: false, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: false, //定位成功后用圆圈表示定位精度范围,默认:true showCircle: false, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: false, //定位成功后将定位到的位置作为地图中心点,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见 zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见
extensions: 'all', extensions: 'all',
pName: 'Geolocation', pName: 'Geolocation',
...@@ -169,10 +170,12 @@ export default class AppMobMapPage extends Vue { ...@@ -169,10 +170,12 @@ export default class AppMobMapPage extends Vue {
} else { } else {
o.getCurrentPosition((status: any, result: any) => { o.getCurrentPosition((status: any, result: any) => {
if (result && result.status != 0) { if (result && result.status != 0) {
alert('定位成功')
this.center = [result.position.lng, result.position.lat]; this.center = [result.position.lng, result.position.lat];
this.address = result.formattedAddress; this.address = result.formattedAddress;
Object.assign(this.marker, { position: this.center, address: this.address, visible: true }); Object.assign(this.marker, { position: this.center, address: this.address, visible: true });
} else { } else {
alert('定位失败')
this.address = this.marker.address; this.address = this.marker.address;
console.warn('定位失败'); console.warn('定位失败');
} }
......
...@@ -52,4 +52,11 @@ export const appConfig = { ...@@ -52,4 +52,11 @@ export const appConfig = {
color: "#FFF", color: "#FFF",
}, },
], ],
// 默认定位
defaultAddress: {
// 地址信息
address: '四川省成都市武侯区桂溪街道天府大道北段成都南站',
// 经纬度
position: [104.067836, 30.606631],
}
}; };
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册