huiyan-fe / react-bmapgl Goto Github PK
View Code? Open in Web Editor NEW基于百度地图JavaScript GL版API封装的React组件库
Home Page: http://huiyan.baidu.com/github/react-bmapgl/
License: MIT License
基于百度地图JavaScript GL版API封装的React组件库
Home Page: http://huiyan.baidu.com/github/react-bmapgl/
License: MIT License
{markerList.map((item, index) =>
<>
<Marker position={item.position} icon={ currentId === item.id ? 'loc_red' : 'simple_blue'} autoViewport onClick={() => this.iconClick(item)} id={item.id}
onMouseover={() => this.setState({ hoverPosition: item.position })}
/>
遍历渲染页面上的marker,根据currentId改变当前icon颜色,现在currentId数据更新了,可是页面render没有触发
设置之后,相对位置并没有变成最top
当前这个库支持vue吗?或者有推荐支持vue2,3版本的库吗?
RT
您好,请问Marker组件的onClick事件如何设置为单击显示InfoWindow,在js中可以调用openInfoWindow,那在组件中怎么调用这个方法嘛?
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget 中介绍有定位的按钮
请问本组件何时考虑加入?现在如果没有加入,有什么方法可以用到呢?
这里面zoom和center都是正常的,只有类型无法更新。
const MapsContainer = (props: MapsProps) => {
const [position, setPosition] = useState(new BMapGL.Point(116.404449, 39.914889));
const [zoom, setZoom] = useState(12);
const [mapType, setMapType] = useState<'normal'|'earth'|undefined>('normal');
const getPos = () =>navigator.geolocation.getCurrentPosition((pos) => {
setPosition(new BMapGL.Point(pos.coords.longitude, pos.coords.latitude));
setZoom(15);
});
return (
<div className={styles.maps} data-show={props.show}>
<div className={styles.appBar}></div>
<div className={styles.content}>
<div className={styles.mapBar}>
<div className={styles.mapBarLeft}>
<div className={styles.mapBarIconBox} onClick={getPos}>
<FontAwesomeIcon
className={styles.mapBarIcon}
icon={faPaperPlane}
/>
</div>
<div
className={styles.mapBarIconBox}
onClick={() => setMapType('earth')}
>
<FontAwesomeIcon
className={styles.mapBarIcon}
icon={faGlobeAsia}
/>
</div>
</div>
</div>
<div className={styles.mapContainer}>
<Map
center={position}
style={{ width: `100%`, height: `100%` }}
// 这里更新不了
mapType={mapType}
zoom={zoom}
enableScrollWheelZoom
enableDoubleClickZoom
enableDragging
/>
</div>
</div>
</div>
);
};
react-bmapgl中要设置类似marker.setAnimation(BMAP_ANIMATION_BOUNCE);的效果,请问这个怎么设置
const bounds = new window.BMapGL.Bounds( new window.BMapGL.Point(79.031845, 23.07253), new window.BMapGL.Point(139.522157, 58.525824), ); map.setBounds(bounds);
Type 'Point' is not assignable to type 'Point & string'.
Type 'Point' is not assignable to type 'string'. TS2322
95 | return (
96 | <Map
> 97 | center={new BMapGL.Point(116.3, 39.7)}
| ^
98 | mapStyleV2={{styleJson: mapStyle as BMapGL.MapStyleItem[]}}
99 | style={{height: '100%', width: '100%'}}
100 | zoom={17}
看了一下Map下面的index
export interface MapProps {
/** 中心点坐标 */
center: BMapGL.Point & string;
我改成BMapGL.Point | string,就没报错了
移动或改变DrawingManager生成的矩形框之后,组件的onOverlaycomplete事件的 e.overlay 是旧数据,而非移动之后的数据
const geolocation = new BMapGL.Geolocation()
geolocation.getCurrentPosition(result => {
console.log(result) // null
})
之前项目用JavaScript API v2.0有获取值,但是在BMapGL API中就无效了。
想使用MapVGL中的IconLayer.自定义icon
map组件里面的React cloneElement 会引起子组件重新创建
map.setCenter
map.panTo
map.centerAndZoom
map.setViewport
都有这个问题,有办法解决嘛?
feel free to ask any questions
"react-bmapgl": "^0.1.3",
`
import { Map, CustomOverlay } from 'csr!react-bmapgl';
import Arc from 'csr!react-bmapgl/Custom/Arc';
<Arc
autoViewport={false}
lineOptions={{
width: 5,
color: 'rgba(250, 50, 20, 0.7)'
}}
arrowOptions={{
styleOptions: {
color: 'rgba(250, 50, 20, 0.7)'
}
}}
pointOptions={{
size: 20,
color: 'rgba(250, 50, 20, 0.7)',
shape: 'square'
}}
textOptions={{
fontFamily: 'Kaiti SC',
color: '#f00',
offset: [0, -20]
}}
animationOptions={{
width: 2,
color: () => 'rgba(250, 250, 20, 0.7)',
interval: 0.1
}}
data={[
{
from: {
city: '北京'
},
to: {
city: '南京'
}
},
{
color: '#392',
from: {
city: '北京',
},
to: {
name: '哈哈',
point: {
lng: 101.45934,
lat: 39.135305
}
}
},
{
from: {
city: '北京'
},
to: {
city: '成都'
}
},
{
from: {
city: '北京'
},
to: {
city: '广州'
}
}
]}
/>`
使用DrawingManager绘制好的图形如何再此编辑
使用BMapGL 自定义setMapStyleV2时,在IE11 & chrome 81 等高版本时候拖动会白屏,请问下现在有解决方案吗?
[1] ----------------服务端报错------------------- ReferenceError: window is not defined
请修复window
将代码放在useEffect中使用
读取mapvgl.FlyLineLayer 会得到undefined
return (
<Map
style={{ height: '100%', width: '100%' }}
center={{ lng, lat }}
heading={heading} // 开启地图转角
zoom={19}
tilt={70} // 开启地图倾斜角度
></Map>
);
连续更新 center 的坐标 地图中心点不更新
关闭中心点移动效果
文字看不出来,图片很明显,一闪一闪的
const [test, setTest] = React.useState(0);
React.useEffect(() => {
setInterval(() => {
setTest((state) => state + 1);
}, 500);
}, []);
<Map
ref={mapCallback}
center={mapCenter}
zoom={mapZoom.current}
maxZoom={mapZoom.max}
minZoom={mapZoom.min}
enableScrollWheelZoom={true}
style={{ position: 'fixed', left: 0, top: 0, width: '100%', height: '100%' }}
>
<CustomOverlay position={new BMapGL.Point(120.0538590588235, 27.611044541630818)}>
<img src={require('@/assets/maintain-car.png')} width="63" />
</CustomOverlay>
</Map>
报错:Access to image at 'http://huiyan.baidu.com/cms/react-bmap/markers_new2x_fbb9e99.png' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed.
尝试给marker添加右键菜单可是失败了,但是BMap是可以的,请问这个要怎么解决?
麻烦大佬了
navagationcontrol设置auchor 跟 offset 无效?
https://api.map.baidu.com/getscript
getScript内部有段兼容代码有bug
此处的兼容代码没有考虑到element可能是null的情况
想要实现地图的折线效果,但是根据文档发现react-bmapgl包里并没有BMapGL.Point相关方法:
使用typescript时,提示marker的map、icon必填
export interface MapChildrenProps {
/** *地图实例,来自父元素<Map>
的继承,无需手动传入 */
map: BMapGL.Map;
}
<MapvglLayer
key={index}
type='IconLayer'
data={[
{
geometry: {
type: 'Point',
coordinate,
},
},
]}
options={{
width: 42 / 2,
height: 42 / 2,
icon: warehouseIcon,
onClick: (e) => {
// 点击事件
console.log(e);
},
}}
/>
搜索和地图进行联动的时候需要
map.enableRotateGestures()此方法报错;
map.disableRotate()此方法无效
貌似是在请求 //api.map.baidu.com/apixxxx
之后请求//api.map.baidu.com/getscript
返回的脚本里使用了write 我是异步加载的最后报了下面的错误
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.