React自己写的一个地图小组件

由于今天比较闲，就玩了玩react，然后就封装了一个地图的组件，当然功能比较简单，因为就是随手写的小东西，但是由于引用了百度API和bee-mobile，所以用起来可能要薛微麻烦一点点，但是我保证，只是一点点而已。

由于之前发了一次，说字数太少从主页移出了，作为一个铁头娃，那我肯定得重写啊。前一次发的不够细致，这次就薛微细一点好吧，

由于，由于，鱿鱼，说的我都饿了。不说了进入正题好吧，

首先说说百度地图的API和bee-mobile,然后将两者结合到一起，形成新的组件

百度地图的API在这篇文章就赘述了，前面的随笔中我写过，需要的同学去看一下就好，也很简单

主要使用了bee-mobile的

　　1.Notification主要是来实现点击后的弹出功能，

　　2.Button是按钮，

　　3.Icon是图标

多说无益，直接上效果图好吧

效果：1.地图的缩放

效果

效果（这个是百度API默认的一个定位图标，我没改，因为我感觉这个狐狸挺可爱的，我也没给组件提供改小狐狸的参数，别问我为什么，就是头铁）

　　1.基础三步走　　　　百度地图API，百度地图API的引入在此不多赘述，我前面的文章中已经介绍百度地图API这篇文章）　　　　　　　　　　2.我直接把组件的源码放上来，需要的直接拉下去随便找地方放下，在需要使用的组件里直接引用即可，注意:使用前请阅读最下方的使用说明　　　　源码我加了一小部分注释，很容易就能看懂

组件源代码：

{}{}const NewaddressButton = styled(Button)

 width:$</span>{<span style="color: #ff0000"&gt;props=>props.width||"100%"</span>}<span style="color: #800000"&gt;; height:$</span>{<span style="color: #ff0000"&gt;props=>props.height||"200px"</span>}<span style="color: #800000"&gt;; background-color:$</span>{<span style="color: #ff0000"&gt;props=>props.sideBgColor||"white"</span>}<span style="color: #800000"&gt;; 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</span>{<span style="color: #ff0000"&gt;
            padding-left</span>:<span style="color: #0000ff"&gt;.1rem</span>;<span style="color: #ff0000"&gt;
            flex</span>:<span style="color: #0000ff"&gt;1</span>;<span style="color: #ff0000"&gt;
      button{
              width</span>:<span style="color: #0000ff"&gt;95%</span>;<span style="color: #ff0000"&gt;
              background-color</span>:<span style="color: #0000ff"&gt;rgb(43,130)
     </span>}<span style="color: #800000"&gt;
    }

class AddressComponent extends Component{
render() {
return(

}

                <div className="addressInfo"&gt;<Button theme="success"&gt;<span>当前地址:</span><span></span>{<span style="color: #ff0000"&gt;this.props.topAddress</span>}<span style="color: #800000"&gt;</span></Button></div>
            </Addresstop>
            <Pudian></Pudian>
            <NewaddressButton </span>{<span style="color: #ff0000"&gt;...this.props</span>}<span style="color: #800000"&gt;>
            <Address className="address" id="address" </span>{<span style="color: #ff0000"&gt;...this.props</span>}<span style="color: #800000"&gt;>
            </Address>
        </NewaddressButton>
        </div>



    )
}
componentDidMount()</span>{<span style="color: #ff0000"&gt;
    var map = new BMap.Map("address"); // 创建Map实例
    //城市优先
    if(this.props.MapCity){
        map.cen<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>ndZoom(this.props.MapCity||"北京",this.props.level||11);
    </span>}<span style="color: #800000"&gt;else</span>{<span style="color: #ff0000"&gt;
         map.cen<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>ndZoom(new BMap.Point(this.props.longitude||116.<a href="https://www.jb51.cc/tag/404/" target="_blank" class="keywords">404</a>,this.props.latitude||39.915),this.props.level||11); // 初始化地图,设置中心点坐标和地图级别
    </span>}<span style="color: #800000"&gt;
    this.props.MapTypeControl&amp;&amp;map.addControl(new BMap.MapTypeControl()); //<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>地图类型控件

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

    if(this.props.zoomControl)</span>{<span style="color: #ff0000"&gt;
    var top_left_navigation = new BMap.NavigationControl();  //<a href="https://www.jb51.cc/tag/zuoshangjiao/" target="_blank" class="keywords">左上角</a>，<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认缩放平移控件
        //<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>控件和比例尺
    map.addControl(top_left_navigation);
    </span>}<span style="color: #800000"&gt;

    var _this = this
    var geoc = new BMap.Geocoder(); 
    //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到点击的API
    map.addEventListener("click",function(e)</span>{<span style="color: #ff0000"&gt;
        var pt = e.point;
        geoc.getLocation(pt,function(rs){
            var addComp = rs.addressComponents;
            console.log(pt)
            _this.props.getAddress(addComp,pt)
            //<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>信息
            //在当前地图上设置标注
                //创建小狐狸
                map.clearOverlays();

                var myIcon = new BMap.Icon("http</span>:<span style="color: #0000ff"&gt;//lbsyun.baidu.com/jsdemo/img/fox.gif",new BMap.Size(170,157))</span>;<span style="color: #ff0000"&gt;
                var marker2 = new BMap.Marker(pt,{icon</span>:<span style="color: #0000ff"&gt;myIcon</span>}<span style="color: #800000"&gt;);  // 创建标注
                map.addOverlay(marker2);              // 将标注<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到地图中

            Notification.info(</span>{<span style="color: #ff0000"&gt;
                title</span>:<span style="color: #0000ff"&gt; '',message: `已选择:${addComp.province&amp;&amp;addComp.province</span>}<span style="color: #800000"&gt;$</span>{<span style="color: #ff0000"&gt;addComp.city&amp;&amp;"/"+addComp.city</span>}<span style="color: #800000"&gt;$</span>{<span style="color: #ff0000"&gt;addComp.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>trict&amp;&amp;"/"+addComp.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>trict</span>}<span style="color: #800000"&gt;$</span>{<span style="color: #ff0000"&gt;addComp.street&amp;&amp;"/"+addComp.street</span>}<span style="color: #800000"&gt;`,},)
        });
    })}

}
export default AddressComponent

组件使用指南：

　　1.引入组件

　　2.组件使用参数说明

　　　　　　　　　topAddress = {}　　　　　　　　　topButtonEvent = {} 　　　　　　　　　height="500px" 　　　　　　　　　　　　　　　　　　sideBgColor="lightBlue" 　　　　　　　　　显示地图的级别 level="11" MapCity="上海" longitude ="116.404" latitude="39.915" MapTypeControl={} enableScrollWheelZoom={} zoomControl={}{{ 获取到地址　district + "," + address.street + "," + address.streetNumber); 　获取地址进行操作　　　　　　　　　　 console.log(LongitudeAndLatitude) }

到这里已经可以愉快的使用了，按照步骤走应该是可以正常运行的，假设有问题可以评论我，特别注意一下，该组件只是随手写着玩的，并不完善，可以当Demo来使用参考

写的很不严谨，单纯是为了实现功能而写的代码，许多判断的地方都没有写的非常严谨，请各位大佬不要太较真，瞅瞅就好，如果有问题请指出，我出一瓶红牛买你的指点好吧，啥，一瓶红牛不够？那一场正规保健可以不，正规的啊，别想歪了，我不是那种人，毕竟快到年底了，安全为重。哈哈哈。

加上的大佬，博客名叫做：默王二，文笔非常好的大腿，我已经验证过了，人也很有意思，可以说是很棒了

React自己写的一个地图小组件

相关文章