uniapp学习10，百度地图组件，地图标记坐标

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:[],// ✅ 10 个随机分散在中心点附近的坐标苹果标记点randomPoints:[{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},{longitude:116.404(Math.random()-0.5)*0.1,latitude:39.915(Math.random()-0.5)*0.1},]};},onReady(){// #ifdef H5this.initMapH5();// #endif// ✅ 初始化后自动加载 10 个苹果标记this.loadAllMarkers();},methods:{// H5 百度地图初始化initMapH5(){// #ifdef H5this.mapnewBMapGL.Map(container);constpointnewBMapGL.Point(this.longitude,this.latitude);this.map.centerAndZoom(point,15);this.map.enableScrollWheelZoom(true);// #endif},// ✅ 加载 10 个苹果标记点loadAllMarkers(){letarr[];this.randomPoints.forEach((item,index){arr.push({id:index1,longitude:item.longitude,latitude:item.latitude,iconPath:data:image/svgxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMWEzIDMgMCAwIDAtMyAzYyAgMCAxLjEgMS4yIDIgMiAyaDRjLjggMCAyLS45IDItMEEzIDMgMCAwIDAgMTIgMXoiLz48cGF0aCBkPSJNMTIgMTJ2LTEwIi8PHBhdGggZD0iTTEyIDEyYTIgMiAwIDAgMCAyIDJoMGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtNGEyIDIgMCAwIDAtMiAydjRhMiAyIDAgMCAwIDIgMnoiLz48L3N2Zz4,width:30,height:30});});this.markersarr;// #ifdef H5this.loadH5Markers();// #endif},// ✅ H5 端也显示 10 个苹果标记loadH5Markers(){// #ifdef H5this.map.clearOverlays();this.randomPoints.forEach(item{letpnewBMapGL.Point(item.longitude,item.latitude);letmyIconnewBMapGL.Icon(/static/pikaqiu.jpg,newBMapGL.Size(60,60));letmarkernewBMapGL.Marker(p,{icon:myIcon});this.map.addOverlay(marker);});// #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.loadH5Markers();// #endif// #ifdef MP-WEIXIN || APP-PLUSthis.loadAllMarkers();// #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