trao+react笔记之Map组件的使用

import { CoverView, Map, View } from '@tarojs/components'
import { Component} from "react";
import Taro from "@tarojs/taro";const normalCallout = {id: 1,latitude: 32,longitude: 122,callout: {content: '位置',color: '#ff0000',fontSize: 10,borderWidth: 2,borderRadius: 10,borderColor: '#000000',bgColor: '#fff',padding: 5,display: 'ALWAYS',textAlign: 'center',}
}export default class OwnerMap extends Component{constructor(props) {super(props);this.state = {longitude:111,//中心经度latitude:23,//中心纬度customMarkers:[],showTarget:false,}}async componentDidMount(){await this.getCurrentLocation('init')}//获取当前位置getCurrentLocation = async (e) => {const that = thisif(e !== 'init'){e.stopPropagation()}await Taro.getLocation({type: 'wgs84',success: function (res) {const latitude = res.latitudeconst longitude = res.longitudethat.setState({latitude,longitude,})}})}//目标onTab = (e)=>{const { showTarget } = this.stateif(showTarget){return}normalCallout['longitude'] = e.currentTarget.longitudenormalCallout['latitude'] = e.currentTarget.latitudethis.setState({customMarkers:[normalCallout]})}componentDidUpdate(prevProps): void {if(prevProps !== this.props){const mapCtx = Taro.createMapContext('myMap')mapCtx.moveToLocation()this.setState({customMarkers:[]})}}render(){const { latitude,longitude,customMarkers } = this.statereturn (<Mapmarkers={customMarkers.length?customMarkers:[]}latitude={latitude}longitude={longitude}style={{ height: '100vh', width: '100vw' }}showLocation={true}onClick={this.onTab}showCompass={true}id="myMap"></Map>)}} 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！