uniapp学习9，同时兼容h5和微信小程序的百度地图组件

H5端微信小程序端manifest.json配置mp-weixin:{appid:你的微信小程序appid,setting:{urlCheck:false},usingComponents:true,permission:{scope.userLocation:{desc:你的位置信息将用于定位显示}},requiredBackgroundModes:[location],mapKey:{baidu:你的百度地图AK}},templateviewclasscontainer!-- 地图区域全屏 --viewclassmap-wrap!-- #ifdef H5 --viewidcontainerclassmap/view!-- #endif --!-- #ifdef MP-WEIXIN || APP-PLUS --mapclassmapproviderbaidu:longitudelongitude:latitudelatitude:scale16:markersmarkersshow-location/map!-- #endif --!-- 定位按钮 --viewclasslocate-btnclickhandleLocatetextclassicon/text/view/view!-- 电站列表 --viewclassstation-listviewclassstation-itemviewclassstation-headertextclassstation-id58100052/texttextclassstatus online在线/texttextclasstag recent最近/text/viewviewclassstation-infotext小区名称中xxxxxx台/texttextclassdistance0.07Km/text/viewviewclassstation-porttext占用插座textclassred4个/text/texttext空闲插座textclassgreen6个/text/text/view/view/view/view/templatescriptexportdefault{data(){return{map:null,longitude:116.404,latitude:39.915,markers:[]};},onReady(){// #ifdef H5this.initMapH5();// #endif},methods:{// H5 百度地图初始化initMapH5(){// #ifdef H5this.mapnewBMapGL.Map(container);constpointnewBMapGL.Point(this.longitude,this.latitude);this.map.centerAndZoom(point,15);this.map.enableScrollWheelZoom(true);// #endif},// 定位方法全端兼容handleLocate(){uni.showLoading({title:定位中...});uni.getLocation({type:gcj02,success:(res){this.longituderes.longitude;this.latituderes.latitude;// #ifdef H5constpnewBMapGL.Point(this.longitude,this.latitude);this.map.centerAndZoom(p,16);this.map.clearOverlays();this.map.addOverlay(newBMapGL.Marker(p));// #endif// #ifdef MP-WEIXIN || APP-PLUSthis.markers[{id:0,longitude:this.longitude,latitude:this.latitude,width:30,height:30}];// #endifuni.showToast({title:定位成功});},fail:(){uni.showToast({title:定位失败,icon:none});},complete:(){uni.hideLoading();}});}}};/scriptstylescoped.container{width:100%;height:100vh;position:relative;overflow:hidden;}.map-wrap{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;}.map{width:100%;height:100%;}.locate-btn{position:absolute;right:20px;bottom:180px;width:50px;height:50px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10pxrgba(0,0,0,0.2);z-index:10;}.icon{font-size:24px;}.station-list{position:absolute;bottom:0;left:0;width:100%;background:#fff;border-radius:16px 16px 0 0;padding:16px;box-shadow:0 -2px 10pxrgba(0,0,0,0.1);z-index:20;}.station-item{padding:12px 0;}.station-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;}.station-id{font-size:24px;font-weight:bold;}.status.online{background:#07c160;color:#fff;padding:4px 12px;border-radius:8px;font-size:14px;}.tag.recent{background:#ff4d4f;color:#fff;padding:4px 12px;border-radius:8px;font-size:14px;margin-left:auto;}.station-info{display:flex;justify-content:space-between;margin-bottom:8px;font-size:16px;color:#333;}.distance{color:#07c160;font-weight:bold;}.station-port{display:flex;gap:20px;font-size:16px;}.red{color:#ff4d4f;font-weight:bold;}.green{color:#07c160;font-weight:bold;}/style