微信小程序Map - 地图打点

需求背景

查询某个位置的店铺信息，在地图上标点显示，可打开手机上的相关地图导航软件

代码实现

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import iconPng from '../../assets/images/icon.png'

import './index.scss'

@inject('store')
@observer
export default class StoreMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      setting: {
        enable3D: true
      },
      markers: [],
    }
  }

  componentWillReceiveProps(props) {
    this.handelList(props.storeList)
  }

  componentDidMount() {
   // 当前位置、标记点的数组可由父级传入
    this.handelList(this.props.storeList)
  }
  handelList = (data) => {
  // 处理数据，设置经纬度、图标大小等
    let marks = []
    data.map(item => {
      marks.push({
        id: item.store_id,
        latitude: item.lat,
        longitude: item.lng,
        width: '19px',
        height: '25px',
        title: item.store_name,
        iconPath: iconPng
      })
    })
    // markers是存放标记的点经纬度的数组
    this.setState({
      markers: marks,
    })
  }
 
  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className="map-box">
        <map
          id="myMap"
          style="width: 100%;height: 100%;"
          latitude={this.props.latitude}
          longitude={this.props.longitude}
          markers={this.state.markers}
          scale="11"
          show-location
        ></map>
      </View>
    )
  }
}