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

update:更新地图

上级 847b4ce4
...@@ -18,15 +18,15 @@ ...@@ -18,15 +18,15 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<el-amap <el-amap
zoom="12"
vid="amap" vid="amap"
ref="map" ref="map"
class="app-map" class="app-map"
:zoom="12"
:plugin="plugin" :plugin="plugin"
:center="center"
:events="events" :events="events"
:amap-manager="amapManager"> :amap-manager="amapManager">
<el-amap-marker <el-amap-marker
v-if="marker.visible"
class="map-marker" class="map-marker"
vid="component-marker" vid="component-marker"
:icon="marker.icon" :icon="marker.icon"
...@@ -39,7 +39,6 @@ ...@@ -39,7 +39,6 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { AMapManager } from 'vue-amap'; import { AMapManager } from 'vue-amap';
import { appConfig } from '@/config/appConfig';
import { Vue, Component, Prop } from "vue-property-decorator"; import { Vue, Component, Prop } from "vue-property-decorator";
@Component({ @Component({
...@@ -89,22 +88,14 @@ export default class AppMobMapPage extends Vue { ...@@ -89,22 +88,14 @@ export default class AppMobMapPage extends Vue {
public amapManager: any = new AMapManager(); public amapManager: any = new AMapManager();
/** /**
* 地图中心点 * 地图标点信息
*
* @type {*}
* @memberof AppMobMapPage
*/
public center: any[] = appConfig.defaultAddress.position;
/**
* 地图标点信息(无定位默认标点)
* *
* @type {*} * @type {*}
* @memberof AppMobMapPage * @memberof AppMobMapPage
*/ */
public marker: any = { public marker: any = {
position: appConfig.defaultAddress.position, position: [0, 0],
address: appConfig.defaultAddress.address, 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
}; };
...@@ -143,10 +134,11 @@ export default class AppMobMapPage extends Vue { ...@@ -143,10 +134,11 @@ export default class AppMobMapPage extends Vue {
maximumAge: 0, //定位结果缓存0毫秒,默认:0 maximumAge: 0, //定位结果缓存0毫秒,默认:0
buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角 buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
showButton: true, //显示定位按钮,默认:true showButton: true, //显示定位按钮,默认:true
showMarker: false, //定位成功后在定位到的位置显示点标记,默认:true showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: false, //定位成功后用圆圈表示定位精度范围,默认:true showCircle: false, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见 zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见
enableHighAccuracy: true, // 是否使用高精度定位,默认为true
extensions: 'all', extensions: 'all',
pName: 'Geolocation', pName: 'Geolocation',
events: { events: {
...@@ -170,12 +162,9 @@ export default class AppMobMapPage extends Vue { ...@@ -170,12 +162,9 @@ 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) {
this.center = [result.position.lng, result.position.lat]; const position = [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: position, address: this.address, visible: true });
} else {
this.address = this.marker.address;
console.warn('定位失败');
} }
}); });
} }
...@@ -233,7 +222,6 @@ export default class AppMobMapPage extends Vue { ...@@ -233,7 +222,6 @@ export default class AppMobMapPage extends Vue {
address: this.address, address: this.address,
visible: true visible: true
}); });
this.center = position;
if (!this.address) { if (!this.address) {
const address = await this.getAddress(longitude, latitude).catch((error) => { const address = await this.getAddress(longitude, latitude).catch((error) => {
console.warn(error); console.warn(error);
...@@ -281,7 +269,6 @@ export default class AppMobMapPage extends Vue { ...@@ -281,7 +269,6 @@ export default class AppMobMapPage extends Vue {
* @memberof AppMapPosition * @memberof AppMapPosition
*/ */
public handleSearch() { public handleSearch() {
this.center = [];
const that = this; const that = this;
let placeSearch: any; let placeSearch: any;
// 调用服务搜索结果 // 调用服务搜索结果
...@@ -342,7 +329,6 @@ export default class AppMobMapPage extends Vue { ...@@ -342,7 +329,6 @@ export default class AppMobMapPage extends Vue {
} }
Object.assign(that.marker, { position: [lng, lat], address: address, visible: true }); Object.assign(that.marker, { position: [lng, lat], address: address, visible: true });
that.address = address; that.address = address;
that.center = [lng, lat];
} }
/** /**
......
...@@ -52,11 +52,4 @@ export const appConfig = { ...@@ -52,11 +52,4 @@ export const appConfig = {
color: "#FFF", color: "#FFF",
}, },
], ],
// 默认定位
defaultAddress: {
// 地址信息
address: '四川省成都市武侯区桂溪街道天府大道北段成都南站',
// 经纬度
position: [104.067836, 30.606631],
}
}; };
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册