zoukankan      html  css  js  c++  java
  • react amap 高德地图中多点定位,图标自定义

    首先在项目里面install react-amap

    我用的自定义图标是svg格式的,可以自行替换成本地icon

    import React, { Component } from 'react'
    import { Map, Markers } from 'react-amap'
    import { Icon } from 'antd';
    import icons from '../../assets/img/yellow_icon.png'
    import Svgvector from '../../components/Svgvector';
    const mapKey = process.env.REACT_APP_AMAP_KEY //需要自己去高德官网上去申请process.env.REACT_APP_BASE_URL

    class Address extends Component {
        constructor(props) {
            super(props)
            this.state = {
                visible: false,
                offset: [0, 0],
                positions: [116,38],
                context: [],
                assetCount: [],
                markList: [
                    {
                        context: 1,
                        position:{
                            longitude: 116,
                            latitude: 39,
                        },
                        assetCount: '',
                        address: ''
                    },
                    {
                        context: 2,
                        position:{
                            longitude: 116,
                            latitude: 38,
                        },
                        assetCount: '',
                        address: ''
                    },
                    {
                        context: 3,
                        position:{
                            longitude: 117,
                            latitude: 39,
                        },
                        assetCount: '',
                        address: ''
                    }
                ],
            };
            this.markersEvents = {
                click: (MapsOption, marker) => {
                    console.log('map data changed, got event',);
                    const extData = marker.getExtData();
                    // console.log(extData)
                    this.setState({
                        visible: !this.state.visible,
                        positions: extData.position,
                        context: extData.context,
                        assetCount: extData.assetCount
                    });
                },
            };
        }
       
        UNSAFE_componentWillMount(){
            
        }
        //自定义icon代码
        renderLayout(extData) {
            if(extData.context===1){
                return (
                    <div style={{position: 'relative'}}>
                        <div className="map_icon_num" style={{background:'#ff0000'}}>{extData.context}</div>
                        
                        <div style={{16,height:16}}>
                            <Icon style={{ 'color': '#ff0000', 'margin': '0 4px' }} component={Svgvector} />
                        </div>
                    </div>
                );
            }
            if(extData.context===2){
                return (
                    <div style={{position: 'relative'}}>
                        <div className="map_icon_num" style={{background:'#FF7A00'}}>{extData.context}</div>
                        
                        <div style={{16,height:16}}>
                            <Icon style={{ 'color': '#FF7A00', 'margin': '0 4px' }} component={Svgvector} />
                        </div>
                    </div>
                );
            }
            if(extData.context===3){
                return (
                    <div style={{position: 'relative'}}>
                        <div className="map_icon_num" style={{background:'#0CA919'}}>{extData.context}</div>
                        
                        <div style={{16,height:16}}>
                            <Icon style={{ 'color': '#0CA919', 'margin': '0 4px' }} component={Svgvector} />
                        </div>
                    </div>
                );
            }
        }
        render() {
            return (
                <div style={{  '100%', height: '100%'}}>
                    {
                        this.state.markList.length <= 0 ? 
                        (
                            <Map amapkey={mapKey}
                            zoom={10}
                            center={this.state.positions}//初始化地图中心点
                            plugins={['ToolBar']} >
                            </Map>
                        ) :
                        (
                            <Map amapkey={mapKey}
                                zoom={10}
                                
                                center={this.state.positions}
                                plugins={['ToolBar']}>
                                
                                <Markers
                                    markers={this.state.markList}
                                    render={this.renderLayout}
                                    // useCluster={true}
                                    // events={this.markersEvents}
                                >
                                </Markers>
                            </Map>
                        )
                    }
                    
                </div>
            )
        }
    }

    export default Address

      

  • 相关阅读:
    centos7下安装jdk
    在centos7关于防火墙的基本操作
    hadoop的特性
    java中怎么使用combobox,并获取其选中的值
    @suppressWarnings("unchecked")在java中的作用
    The processing instruction target matching "[xX][mM][lL]" is not allowed.
    Invalid byte 2 of 2-byte UTF-8 sequence解决方案
    Nmap
    XSS-笔记
    sql盲注-笔记
  • 原文地址:https://www.cnblogs.com/baiyq/p/13273553.html
Copyright © 2011-2022 走看看