大佬教程收集整理的这篇文章主要介绍了React自己写的一个地图小组件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只是一点点而已。
由于之前发了一次,说字数太少从主页移出了,作为一个铁头娃,那我肯定得重写啊。前一次发的不够细致,这次就薛微细一点好吧,
由于,由于,鱿鱼,说的我都饿了。不说了进入正题好吧,
首先说说
主要使用了bee-mobile的https://bee-mobiles.github.io/#/docs/introduce)
1.Notification主要是来实现点击后的弹出功能,
2.button是按钮,
3.Icon是图标
多说无益,直接上效果图好吧
title="React自己写的一个地图小组件" alt="React自己写的一个地图小组件" src="https://cn.js-code.com/res/2019/03-01/22/6db053168d57f87dfd26b44ddde0888f.png" >
title="React自己写的一个地图小组件" alt="React自己写的一个地图小组件" src="https://cn.js-code.com/res/2019/03-01/22/e7193c80471f4ee1f44a7f755d15b47e.png" >
1.基础三步走 已经介绍 2.我直接把组件的源码放上来,需要的直接拉下去随便找地方放下,在需要使用的组件里直接引用即可,注意:使用前请阅读最下方的使用说明 源码我加了一小部分注释,很容易就能看懂
组件源代码:
width:$</span>{<span style="color: #ff0000">props=>props.width||"100%"</span>}<span style="color: #800000">; height:$</span>{<span style="color: #ff0000">props=>props.height||"200px"</span>}<span style="color: #800000">; BACkground-color:$</span>{<span style="color: #ff0000">props=>props.sideBgColor||"white"</span>}<span style="color: #800000">; overflow:hidden;
const Address = styled.div width:100%; height:$</span>{<span style="color: #ff0000">props=>props.height||"200px" </span>}<span style="color: #800000"> !important; .bR_807_11845@ap_stdMpCtrl</span>{<span style="color: #ff0000"> position</span>:<span style="color: #0000ff">fixed !important</span>;<span style="color: #ff0000"> right</span>:<span style="color: #0000ff">0</span>;<span style="color: #ff0000"> top</span>:<span style="color: #0000ff">.5rem</span>; }<span style="color: #800000">
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
}
.addressInfo</span>{<span style="color: #ff0000">
padding-left</span>:<span style="color: #0000ff">.1rem</span>;<span style="color: #ff0000">
flex</span>:<span style="color: #0000ff">1</span>;<span style="color: #ff0000">
button{
width</span>:<span style="color: #0000ff">95%</span>;<span style="color: #ff0000">
BACkground-color</span>:<span style="color: #0000ff">rgb(43,130)
</span>}<span style="color: #800000">
}
`
class AddressComponent extends Component
{<span style="color: #ff0000"> <div className="addressInfo"><Button theme="success"><span>当前地址:</span><span></span>{<span style="color: #ff0000">this.props.topaddress</span>}<span style="color: #800000"></span></Button></div>
</Addresstop>
<Pudian></Pudian>
<NewaddressButton </span>{<span style="color: #ff0000">...this.props</span>}<span style="color: #800000">>
<Address className="address" id="address" </span>{<span style="color: #ff0000">...this.props</span>}<span style="color: #800000">>
</Address>
</NewaddressButton>
</div>
)
}
componentDidMount()</span>{<span style="color: #ff0000">
var map = new BMap.Map("address"); // 创建Map实例
//城市优先
if(this.props.MapCity){
map.centerAndZoom(this.props.MapCity||"北京",this.props.level||11);
</span>}<span style="color: #800000">else</span>{<span style="color: #ff0000">
map.centerAndZoom(new BMap.point(this.props.longitude||116.404,this.props.latitude||39.915),this.props.level||11); // 初始化地图,设置中心点坐标和地图级别
</span>}<span style="color: #800000">
this.props.MapTypeControl&&map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
this.props.enableScrollWheelZoom&&map.enableScrollWheelZoom();
if(this.props.zoomControl)</span>{<span style="color: #ff0000">
var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件
//添加控件和比例尺
map.addControl(top_left_navigation);
</span>}<span style="color: #800000">
var _this = this
var geoc = new BMap.Geocoder();
//获取到点击的API
map.addEventListener("click",function(E)</span>{<span style="color: #ff0000">
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</span>:<span style="color: #0000ff">//lbsyun.baidu.com/jsdemo/img/fox.gif",new BMap.Size(170,157))</span>;<span style="color: #ff0000">
var marker2 = new BMap.Marker(pt,{icon</span>:<span style="color: #0000ff">myIcon</span>}<span style="color: #800000">); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
Notification.info(</span>{<span style="color: #ff0000">
title</span>:<span style="color: #0000ff"> '',message: `已选择:${addComp.province&&addComp.province</span>}<span style="color: #800000">$</span>{<span style="color: #ff0000">addComp.city&&"/"+addComp.city</span>}<span style="color: #800000">$</span>{<span style="color: #ff0000">addComp.diStrict&&"/"+addComp.diStrict</span>}<span style="color: #800000">$</span>{<span style="color: #ff0000">addComp.street&&"/"+addComp.street</span>}<span style="color: #800000">`,},)
});
})}
}
export default AddressComponent
组件使用指南:
1.引入组件
2.组件使用参数说明
到这里已经可以愉快的使用了,按照步骤走应该是可以正常运行的,假设有问题可以评论我,特别注意一下,该组件只是随手写着玩的,并不完善,可以当Demo来使用参考
写的很不严谨,单纯是为了实现功能而写的代码,许多判断的地方都没有写的非常严谨,请各位大佬不要太较真,瞅瞅就好,如果有问题请指出,我出一瓶红牛买你的指点好吧,啥,一瓶红牛不够?那一场正规保健可以不,正规的啊,别想歪了,我不是那种人,毕竟快到年底了,安全为重。哈哈哈。
,文笔非常好的大腿,我已经验证过了,人也很有意思,可以说是很棒了
以上是大佬教程为你收集整理的React自己写的一个地图小组件全部内容,希望文章能够帮你解决React自己写的一个地图小组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。