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

update:地图定位组件

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