企业网页设计素材西安企业网站seo
记录移动端地图map组件的使用
需求记录：
移动端地图部分需要展示两个定位点，上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡，弹出定位点的信息。
效果图如下：
map在nvue中的使用。直接用nvue可以直接调整层级,可以覆盖住map组件。在map组件上添加按钮控制，实现交互。map组件内添加按钮使用cover-image如下：
<view><map id="map" class="map" :scale="15" ref="map" style="width:320px;height:500px;margin-left: 30px;":latitude="latitude" :longitude="longitude" :markers="cover"><view class="btnStyle"><cover-image src="../../static/images/people.png" class="removeToReal" @tap="removeToReal"></cover-image><cover-image src="../../static/images/gaodeMap.png" style="margin-top: 18px;" class="removeToMap" @tap="removeToMap"></cover-image></view></map>
</view>js部分：
<script>export default {data() {return {// 地图mapContext: null,latitude: null,longitude: null,latitudeReal: null,longitudeReal: null,cover: [],}},methods: {// 移动到对应点坐标removeToReal() {this.mapContext.moveToLocation({latitude: this.latitudeReal,longitude: this.longitudeReal});},// 移动到对应点坐标removeToMap() {this.mapContext.moveToLocation({latitude: this.latitude,longitude: this.longitude});},// 关键代码：// 加载坐标点及气泡。（data参数中包含了所需的所有数据，以下仅为气泡弹窗的代码示例参考）async setMarkers(data) {let latlng = JSON.parse(data.inspectorLocation)let reallatlngTurn = this.wgs84_gcj02(latlng[0],latlng[1])let realatlng = JSON.parse(data.inspectorRealsite)let realTurn = this.wgs84_gcj02(realatlng[0],realatlng[1])this.longitude = reallatlngTurn[0]this.latitude = reallatlngTurn[1]this.longitudeReal = realTurn[0]this.latitudeReal = realTurn[1]let markers = []let markerInspector = {id: 'id_' + 'inspectorLocation',latitude: reallatlngTurn[1],longitude: reallatlngTurn[0],width: 30,height: 35,iconPath: '../../static/images/position2.png',callout:{//自定义标记点上方的气泡窗口 点击有效 content: ` 上报点任务单号：${data.taskSn}任务类型：外部任务派发时间：${data.dispatchTime.slice(0,10)}上报人： ${data.inspectorName}经度： ${latlng[0].toFixed(6)}纬度： ${latlng[1].toFixed(6)}`,//文本color: '#ffffff',//文字颜色fontSize: 14,//文本大小borderRadius: 15,//边框圆角borderWidth: '10',padding: '10',textAlign: 'left',bgColor: '#e51860',//背景颜色display: 'BYCLICK',//常显}}markers.push(markerInspector)let markerReal = {id: 'id_' + 'realLocation',latitude: realTurn[1],longitude: realTurn[0],callout:{//自定义标记点上方的气泡窗口 点击有效content: ` 定位点任务单号：${data.taskSn}任务类型：外部任务上报人： ${data.inspectorName}角色： ${people}派发时间：${data.dispatchTime.slice(0,10)}经度： ${realatlng[0]}纬度： ${realatlng[1]}`,//文本color: '#ffffff',//文字颜色fontSize: 14,//文本大小borderRadius: 15,//边框圆角borderWidth: '10',padding: '10',textAlign: 'left',bgColor: '#e51860',//背景颜色display: 'BYCLICK',//常显}}markers.push(markerReal)this.cover=markers},onLoad(options) {this.mapContext = uni.createMapContext("map", this);}
</scritpt>