洪梅网站建设公司网站制作流程

uniapp地图使用

App端 通过 nvue 页面实现地图

效果图

template

<template><view class="mapWrap"><!-- #ifdef APP-NVUE --><map class="map-container" id="map" :longitude="location.lng" :latitude="location.lat" :show-location="true" :enable-3D="enable3D" :markers="markers" :include-points="includePoints" @callouttap="oncallouttap"></map><!-- 定位当前位置 --><cover-view class="myLocation fcc"><cover-image class="img" src="@/static/image/icon/currnet_location.png" @click="moveToMyLocation"></cover-image></cover-view><!-- #endif --></view>
</template>

js

添加 marker

使用地图查看位置

移到到当前位置

<script>export default {data() {return {location: {lng: 114.058279,lat: 22.505375},markers: [],includePoints: []}},onLoad() {let tmpLocation = this.$store.state.location;if (tmpLocation.lng) {this.location = tmpLocation;}},onReady() {this.map = uni.createMapContext("map", this);},methods: {getData() {// ....// 测试数据this.dataList = [{name: "长安街",location: {lat: 39.907145,lng: 116.396651}},{name: "天安门",location: {lat: 39.908823,lng: 116.39747}}]// 添加 markerthis.addMarkers();},/*** 添加marker*/addMarkers() {let markerList = [];this.batteryList.forEach((item, index) => {let location = item.location;if (location) {// 直接使用 this.markers.push()方式，无法添加 markermarkerList.push({id: Number(index + 1),latitude: Number(location.lat),longitude: Number(location.lng),title: item.name,zIndex: '1',rotate: 0,width: 30,height: 30,anchor: {x: 0.5,y: 1},callout: {content: item.name,color: '#fff',fontSize: 10,borderRadius: 4,borderWidth: 1,borderColor: '#fb6620',bgColor: '#f7b733',padding: '5',display: 'ALWAYS'},iconPath: '/static/image/icon/location01.png'})}this.markers = markerList;})},/*** 气泡事件*/oncallouttap(e) {const { markerId } = e.detail;const marker = this.markers.find((item) => item.id === markerId);// 使用地图查看位置uni.openLocation({latitude: marker.latitude,longitude: marker.longitude,name: marker.title,success: (res) => {console.log('success');}});},/*** 移到到当前位置*/moveToMyLocation() {let latitude = this.location.lat;let longitude = this.location.lng;this.map.moveToLocation({latitude,longitude,success: (res) => {this.includePoints = [{latitude,longitude}];}});}}}
</script>