<template> <div> <el-amap vid="amap" :zoom="zoom" :center="center"> <el-amap-info-window :position="currentWindow.position" :content="currentWindow.content" :visible="currentWindow.visible" :events="currentWindow.events"> </el-amap-info-window> </el-amap> <button @click="switchWindow(0)">Show First Window</button> <button @click="switchWindow(1)">Show Second Window</button> </div> </template> <style> .amap-demo { height: 300px; } </style> <script> module.exports = { data () { return { zoom: 14, center: [121.5273285, 31.21515044], windows: [ { position: [121.5273285, 31.21515044], content: 'Hi! I am here!', visible: true, events: { close() { console.log('close infowindow1'); } } }, { position: [121.5375285, 31.21515044], content: 'Hi! I am here too!', visible: true, events: { close() { console.log('close infowindow2'); } } } ], slotWindow: { position: [121.5163285, 31.21515044] }, currentWindow: { position: [0, 0], content: '', events: {}, visible: false } } }, mounted() { this.currentWindow = this.windows[0]; }, methods: { switchWindow(tab) { this.currentWindow.visible = false; this.$nextTick(() => { this.currentWindow = this.windows[tab]; this.currentWindow.visible = true; }); } } }; </script>
API
当然，除了组件之外，我们还可以使用weex-amap的API来直接操作地图。
5.1 骑行路径Android实现
- (void)searchRidingRouteFromLat:(int)fromLat fromLng:(int)fromLng toLat:(int)toLat toLng:(int)toLng { AMapRidingRouteSearchRequest *request = [[AMapRidingRouteSearchRequest alloc] init]; request.origin = [AMapGeoPoint locationWithLatitude:INT_2_FLOAT(fromLat) / 1000000 longitude:INT_2_FLOAT(fromLng) / 1000000]; request.destination = [AMapGeoPoint locationWithLatitude:INT_2_FLOAT(toLat) / 1000000 longitude:INT_2_FLOAT(toLng) / 1000000]; //发起路径搜索 [self.aMapSearch AMapRidingRouteSearch:request]; } - (void)onRouteSearchDone:(AMapRouteSearchBaseRequest *)request response:(AMapRouteSearchResponse *)response { if(response.route == nil) { return; } //通过AMapNavigationSearchResponse对象处理搜索结果 AMapRoute *route = response.route; if (route.paths.count > 0) { AMapPath *amapPath = route.paths[0]; NSArray *coordArray = amapPath.steps; NSMutableArray *mArray = [NSMutableArray array]; NSArray *start = @[[NSString stringWithFormat:@"%f", request.origin.longitude], [NSString stringWithFormat:@"%f", request.origin.latitude]]; [mArray insertObject:start atIndex:0]; for (AMapStep *step in coordArray) { NSString *polistring = step.polyline; NSArray *array = [polistring componentsSeparatedByString:@";"]; for (NSString *str in array) { NSArray *loc =[str componentsSeparatedByString:@","]; [mArray addObject:loc]; } } NSArray *end = @[[NSString stringWithFormat:@"%f", request.destination.longitude], [NSString stringWithFormat:@"%f", request.destination.latitude]]; [mArray insertObject:end atIndex:mArray.count]; [[DMessageChannelManager shared] postMessage:@"mapLines" andData:@{@"result": @"success", @"data": @{@"mapLines":mArray}}]; } } - (void)AMapSearchRequest:(id)request didFailWithError:(NSError *)error { NSLog(@"Error: %@", error); } @end
5.2 骑行路径iOS实现