今天显得没事自己搞了个地图的小组件，由于是引用了百度的API和bee-Mobile所以用起来比较麻烦，但是可以在M站和移动端实现基本的定位

写的很仓促，就是玩了一下，大家有需要可以拉下去玩玩，先看效果图

 

基本使用步骤：

　　1.因为是基于百度地图API和bee-Mobile的，所以得引入两者，

　　　　百度地图API的使用在此不多赘述，我前面的文章中已经介绍

　　　　bee-Mobile引入  yarn add bee-mobile 即可

　　　　引入styled-components 

　　2.我直接把组件的源码放上来，需要的直接拉下去随便找地方放下，在需要使用的组件里直接引用即可，请阅读最下方的使用说明

　　　　源码我加了一小部分注释，很容易就能看懂

　　　 

import  React,{Component} from 'react';
import styled from "styled-components"
import BMap  from 'BMap';
import {Notification,Button,Icon} from 'bee-mobile';



const NewaddressButton = styled(Button)`
        width:${props=>props.width||"100%"};
        height:${props=>props.height||"200px"};
        background-color:${props=>props.sideBgColor||"white"};
        overflow:hidden;
`

const Address = styled.div`
        width:100%;
        height:${props=>props.height||"200px" } !important;
        .BMap_stdMpCtrl{
            position:fixed !important;
            right:0;
            top:.5rem;
        }
`

const Pudian = styled.div`
        width:100%;
        height:50px;
`
const Addresstop = styled.div`
        position:fixed;
        z-index:999;
        height:.5rem;
        width:100%;
        background-color:rgb(53, 218, 132);
        padding-top:.05rem;
        padding-left:.05rem;
        display:flex;
        color:white;
        line-height:.4rem;
        .address_goback{
                button{
                        background-color:rgb(43, 208, 130)
                }
       
        }
        .addressInfo{
                padding-left:.1rem;
                flex:1;
          button{
                  width:95%;
                  background-color:rgb(43, 208, 130)
         }
        }
`



 class AddressComponent extends Component{ 
    render() {
        return(
            <div>
                <Addresstop>
                    <div className="address_goback">
                    <Button theme="success" shape="circle" onClick={this.props.topButtonEvent.bind(this)}>
                        <Icon icon="keyboard_backspace"/>
                    </Button>
                    </div>
                    
                    <div className="addressInfo"><Button theme="success"><span>当前地址:</span><span>{this.props.topAddress}</span></Button></div>
                </Addresstop>
                <Pudian></Pudian>
                <NewaddressButton {...this.props}>
                <Address className="address" id="address" {...this.props}>
                </Address>
            </NewaddressButton>
            </div>



        )
    }
    componentDidMount(){
        var map = new BMap.Map("address"); // 创建Map实例
        //城市优先
        if(this.props.MapCity){
            map.centerAndZoom(this.props.MapCity||"北京",this.props.level||11);
        }else{
             map.centerAndZoom(new BMap.Point(this.props.longitude||116.404,this.props.latitude||39.915), this.props.level||11); // 初始化地图,设置中心点坐标和地图级别
        }
        this.props.MapTypeControl&&map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

        this.props.enableScrollWheelZoom&&map.enableScrollWheelZoom();

        if(this.props.zoomControl){
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            //添加控件和比例尺
        map.addControl(top_left_navigation);
        }

        var _this = this
        var geoc = new BMap.Geocoder(); 
        //获取到点击的API
        map.addEventListener("click",function(e){
            var pt = e.point;
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                console.log(pt)
                _this.props.getAddress(addComp,pt)
                //添加提示信息
                //在当前地图上设置标注
                    //创建小狐狸
                    map.clearOverlays();

                    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(170,157));
                    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
                    map.addOverlay(marker2);              // 将标注添加到地图中

                Notification.info({
                    title: '',
                    message: `已选择:${addComp.province&&addComp.province}${addComp.city&&"/"+addComp.city}${addComp.district&&"/"+addComp.district}${addComp.street&&"/"+addComp.street}`,
                },
                )
            });
        })}

}
export default AddressComponent

 

　　　　　使用说明：

              <AddressComponent  
　　　　　　　　　　//顶部城市
　　　　　　　　　topAddress = {this.props.address}
　　　　　　　　　　//顶部返回按钮的事件
　　　　　　　　　topButtonEvent = {this.topButtonEvent.bind(this)}  
　　　　　　　　　　//组件的高度            
　　　　　　　　　height="500px" 
　　　　　　　　　//侧边的背景颜色
　　　　　　　　　sideBgColor="lightBlue"
　　　　　　　　　//显示地图的级别
               level="11"

              //设置中心城市，城市优先于经纬度
              MapCity="上海"
              longitude ="116.404"
              latitude="39.915"
               // 地图类型控件
              MapTypeControl={true}
              //是否可以鼠标滚轮滑动
              enableScrollWheelZoom={true}
              //缩放控件
              zoomControl={true}
              getAddress = {(address,LongitudeAndLatitude)=>{
                  //在此可以获取到地址
                //   alert(address.province + ", " + address.city + ", " + address.district + ", " + address.street + ", " + address.streetNumber);
                // 可以在此处获取地址进行操作
　　　　　　　　　　//LongitudeAndLatitude为经纬度

                 console.log(LongitudeAndLatitude)
                }}
              >
             </AddressComponent>

　　　　特别注意：由于写的比价仓促，还会有很多待解决的问题，如果有问题，可以评论我

　　　　　　　　　如果大家能学到点什么，那我非常高兴

　　　　　　　　　转载请注明出处，谢谢，

　　　　　　　　　最后再例行吹个牛逼，喝最烈的酒，写最野的代码

版权声明：本文为suihang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/suihang/p/10024419.html