jserwang / rc-bmap Goto Github PK
View Code? Open in Web Editor NEW当百度地图遇上React,会产生怎样的火花🔥 🎉欢迎您的加入🎉
Home Page: http://jser.wang/bmap/
License: MIT License
当百度地图遇上React,会产生怎样的火花🔥 🎉欢迎您的加入🎉
Home Page: http://jser.wang/bmap/
License: MIT License
@JserWang 嗨
文档上说可以调用map.clearOverlays()方法清除覆盖物,那么具体是怎么操作呢。最好能有代码演示。
旧版本是 window.bMapInstance.clearOverlays();这么操作的。那么新版本呢
@JserWang 1.0版本很赞。今天早上我在http://jser.wang/bmap/。
看文档的时候发现里面的Constants部分好像出现了点问题。截图如下。
另外基础组件Map的API文档缺失
我想根据一个地址名称,获取到他的坐标,并且不需要在页面中显示地图,通过实例的方式获取到就行。
这个怎么弄呢?
Do you want to request a feature or report a bug?
bug
What is the current behavior?
When setting the marker's dragging property to true, drag the marker, and then set the marker's dragging property to false. At this time, the marker returns to the position before the drag.
What is the expected behavior?
The marker remains in its original position.
InfoWindow用什么属性来控制显示隐藏,就像visible这样的属性
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
需求:动态选择省下面的市,Boundary的name动态改变。问题:当选中第二个开始,前面的行政区域的覆盖物和边界线没有清除。
有方法能每次更新都清楚前面的Boundary视图层吗?
Do you want to request a feature or report a bug?
bug
What is the current behavior?
<InfoWindow
visible={cityInfoPanelVisible}
displayMessage
width={200}
height={100}
>
<Point lng={currentLocationLng} lat={currentLocationLat} />
<Title>海底捞王府井店</Title>
<Content>
<div className="reservation-map-address">
地址:北京市东城区王府井大街88号乐天银泰百货八层
</div>
<div
onClick={this.onSelectStore}
className="reservation-map-select-store"
>
点击
</div>
<Events click={this.onSelectStore} />
</Content>
<Events close={this.onCloseCityInfoPanel} />
<Size name="offset" width="0" height="-30" />
</InfoWindow>
点击 <Content>
中 的 点击
按钮时 无法触发点击事件
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
如下代码,我怎么在onconfirm
方法里获取当前选中项的经度和纬度,用于在地图上进行标记显示
...
const events = {
onconfirm(e) {
console.log(e);
}
};
...
<AutoComplete
input="pcc"
searchComplete={this.searchComplete}
events={events}
location={location}
value={value}
/>
动态选择省下面的市,Boundary的name动态改变。当选中第二个开始,前面的行政区域的边界线没有清楚,有解决方法吗?
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
Do you want to request a feature or report a bug?
bug
What is the current behavior?
When setting the editing property of polyline or polygon to true, do some editing, then set the editing property to false, and the edited result is not displayed properly on the map.
What is the expected behavior?
The result is displayed correctly.
InfoWindow as Info-window say, this error happends
copyright: {
id: copyright.id,
content: ‘版权信息’,
bounds:{
ne: {
lng: 116.027143,
lat: 39.772348,
},
sw: {
lng: 116.832025,
lat: 40.126349,
}
},
},
当body有scroll动作后,地图缩放中心点不在是鼠标,偏离很远。
我想获取规划路径的坐标数组,但是onSearchComplete事件没执行,如下code:
···
<WalkingRoute
getInstance={this.getRoute}
showInMap
location="北京"
onSearchComplete={this.onSearchComplete}
// 这里还有更多属性,可参考文档
/>
···
但是我通过在mapMounted
事件中给route绑定一个方法能获取到
···
route.onSearchComplete=res=>{
console.log(res);
}
···
第一种方式也不错吧,是我调用的问题吗?
能否获取到规划路径的坐标数组?我看上面返回的只是起点和终点两个位置对象。
随便问下,能否让规划路径显示成虚线,这也是我要坐标数组的目的,如果不能,我就拿这些点自己画点来当虚线用。
按照demo在程序中添加了规划路线,但地图上不显示。这是怎么回事,copy的demo代码。
我的需求是这样的。点击地图获取到经纬度,然后定位Marker的位置,当使用了setState之后,组件重新渲染,地图上的点击事件就不会再触发了。
代码如下:
class Bmap extends React.Component {
state = {
point: null
}
render() {
const {point} = this.state;
return (
<React.Fragment>
<Map
center='北京'
zoom={18}
placeHolder="地图加载中..."
>
<Events click={this.handleMapClick} />
{point && <Marker>
<Point {...point} />
</Marker>}
</Map>
</React.Fragment>
);
}
handleMapClick = (e) => {
console.log(e,'地图单击事件');
this.setState({
point: e.point
})
}
}
0.2版本,1.0版本均存在这个问题。
麻烦看下是不是我的代码写得有问题。
行政区域组件Boundary 进行测试 设置初始值可以显示指定区域的颜色
但是通过按钮点击切换从新设置属性值是似乎没有效果
例如改变行政区域的name属性
handleName=()=>{
this.setState({
name:'北京市朝阳区'
})
console.log(" name:北京市朝阳区");
}
<button className="butt" onClick={this.handleName}></button>
点击后能够打印og 但没有效果。其他属性值似乎已没有效果,请诊断一下
测试整段代码:
``
import React, { Component } from 'react';
import { Map,Boundary} from 'rc-bmap';
import './App.css';
class App extends Component {
constructor(props){
super(props)
this.state={
name:'杭州市萧山区',
onError:() => {
console.log('onError');
},
autoViewport:true,
strokeColor:"blue",
fillColor:"red",
strokeWeight:5,
strokeOpacity:0.5,
fillOpacity:0.9,
strokeStyle:"dashed",
massClear:false,
editing:false,
clicking:true,
events:{
click() {
console.log('Boundary click');
}
}
}
}
handleName=()=>{
this.setState({
name:'北京市朝阳区'
})
console.log(" name:北京市朝阳区");
}
handleOnError =()=>{
this.setState({
onError:()=>{
console.log("onError");
}
})
}
handleAutoViewport =()=>{
this.setState({
autoViewport:true
})
console.log(" autoViewport:true");
}
handleStrokeColor =()=>{
this.setState({
strokeColor:"red"
})
console.log(" strokeColor:red");
}
handleFillColor =()=>{
this.setState({
fillColor:"blue"
})
console.log(" fillColor:blue");
}
handleStrokeWeight =()=>{
this.setState({
strokeStyle:10
})
console.log(" strokeStyle:10");
}
handleStrokeOpacity =()=>{
this.setState({
strokeOpacity:0.1
})
console.log("strokeOpacity:0.1");
}
handleStrokeStyle =()=>{
this.setState({
strokeStyle:"solid"
})
console.log(" strokeStyle:solid");
}
handleMassClear=()=>{
this.setState({
massClear:true
})
console.log("massClear:true");
}
handleEditing=()=>{
this.setState({
editing:true
})
console.log("editing:true");
}
handleClicking=()=>{
this.setState({
clicking:false
})
console.log(" clicking:false");
}
handleEvents=()=>{
this.setState({
})
console.log("");
}
render() {
const {name,onError,autoViewport,strokeColor,fillColor,strokeWeight,strokeOpacity,fillOpacity,strokeStyle,massClear,editing,clicking,events}=this.state;
return (
<div className="App">
<Map
ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
>
<Boundary
name={name} // 行政区域名字
onError={onError} // 初始化失败回调
autoViewport={autoViewport} // 添加完成后是否自动移动
strokeColor={strokeColor} // 边线颜色
fillColor={fillColor} // 填充颜色。当参数为空时,圆形将没有填充效果
strokeWeight={strokeWeight} // 边线的宽度,以像素为单位
strokeOpacity={strokeOpacity} // 边线透明度,取值范围0 - 1
fillOpacity={fillOpacity} // 填充的透明度,取值范围0 - 1
strokeStyle={strokeStyle} // 边线的样式,solid或dashed
massClear={massClear} // 是否在调用map.clearOverlays清除此覆盖物,默认为true
editing={editing} // 是否启用线编辑,默认为false
clicking={clicking} // 是否响应点击事件,默认为true
events={events} // 绑定事件
></Boundary>
</Map>
<button className="butt" onClick={this.handleName}></button>
<button className="butt" onClick={this.handleOnError}></button>
<button className="butt" onClick={this.handleAutoViewport}></button>
<button className="butt" onClick={this.handleStrokeColor}></button>
<button className="butt" onClick={this.handleFillColor}></button>
<button className="butt" onClick={this.handleStrokeWeight}></button>
<button className="butt" onClick={this.handleStrokeOpacity}></button>
<button className="butt" onClick={this.handleStrokeStyle}></button>
<button className="butt" onClick={this.handleMassClear}></button>
<button className="butt" onClick={this.handleEditing}></button>
<button className="butt" onClick={this.handleClicking}></button>
<button className="butt" onClick={this.handleEvents}></button>
</div>
);
}
}
export default App;
加了gridSize属性之后就不显示聚合点了,无论宽高设置的值是多少
gridSize: {
height: 300,
width: 200,
}
如题,该文件第36行应补充 container.style.position='absolute'
否则,自定义overlay组件位置显示错误
InfoWindow,Polyline.....覆盖类 都有这个问题,提交新版本时,先测试一下哦
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
{data.companys.edges.map(item => (
<Marker key={item.node.id}>
<Events click={this.handleClick.bind(this, item)} />
<Point lng={item.node.location.lng} lat={item.node.location.lat} />
<Label style={{
border: 'none',
backgroundColor: 'rgba(0,0,0,0)',
fontSize: '12px',
color: '#C9D4DF',
fontFamily: 'PingFangSC-Medium',
fontWeight: '400',
height: '20px',
lineHeight: '20px'
}}>
<Size name="offset" width="30" height="0" />
<Content>
<span>{item.node.companyName}</span>
<span style={{
width: '70px',
height: '20px',
backgroundColor: 'rgba(102,146,255,1)',
display: positionNumActice ? 'inline-block' : 'none',
borderRadius: '12px',
marginLeft: '8px',
fontSize: '12px',
fontWeight: '400',
color: '#060024',
textAlign: 'center',
lineHeight: '20px'
}}>职位:{item.node.num}</span>
</Content>
</Label>
<Icon
imageUrl={logo1}
imageSize={{ width: '24', height: '24' }}
>
<Size width="24" height="24" />
</Icon>
</Marker>
))}
通过骑行路线的方式能获取到两点之间到坐标点集合,但是不想通过一个标签的方式来获取信息,因为不需要在地图上显示,于是我写了一个例子,通过声明对象的方式,来获取各种信息。
const ridingRoute = new RidingRoute();
ridingRoute.location = '北京市';
const startPoint = { lng: 116.288434, lat: 40.054741 };
const endPoint = { lng: 116.306293, lat: 40.052532 };
ridingRoute.search(startPoint, endPoint);
ridingRoute.onSearchComplete(result => {
const plan = result.getPlan(0);
console.log('第一条方案', plan);
console.log('当前方案距离', plan.getDistance());
console.log('当前方案耗时', plan.getDuration());
const route = plan.getRoute(0);
// console.log('当前路线', plan.getRoute(0));
// console.log('坐标集合', route.getPath());
this.setState({ points: route.getPath() });
});
但是RidingRoute好像不是这么用的,我看百度地图的API说明,应该是这么用的,但是封装后还是有区别,我试了各种方式,都报错,这个应该怎么改才能实现我这中需求?
Mixed Content: The page at 'https://bmap.jser-club.com/examples/drawingManager' was loaded over HTTPS, but requested an insecure stylesheet 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css'. This request has been blocked; the content must be
自定义的组件为:
import React from 'react';
import { ReactComponent, Overlay } from 'rc-bmap';
const container = {
width: 53,
height: 53,
border: '3px solid red',
borderRadius:'50%'
};
@ReactComponent
class CustomOverlay extends Overlay {
render() {
return (
<div style={ container }>
<img style={{width: 50,height: 50, borderRadius:'50%'}} data-id={this.props.cameraId} alt="" src={this.props.imgSrc} />
</div>
);
}
}
export default CustomOverlay;
在地图中使用参考了
https://bmap.jser-club.com/guide/overlay.html#%E5%9F%BA%E7%A1%80%E7%B1%BB
发现了:
自定义覆盖物在地图缩放时产生偏移,且页面切换,回到地图后没有加载自定义覆盖物
停靠位置从ControlAnchor.BOTTOM_RIGHT改变到ControlAnchor.TOP_LEFT,会先跳到ControlAnchor.TOP_RIGHT再到ControlAnchor.TOP_LEFT
需要实现的是一个提示内容,所以我给label传递了html字符串,但是里面有一个button,button需要一个点击事件,这个事件如何调用组件中定义的事件?
如果用比较react的方式来处理?
###目前解决方法
<div onclick='onClick()'>hello</div>
window.onClick=()=>{}
有没有一个比较react的方式来解决。
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
Do you want to request a feature or report a bug?
bug
What is the current behavior?
调用 map.clearOverlays() 清除覆盖物后,数据更新重新渲染 Marker,但是 Point 和 Polyline 都不显示了
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
期望没有数据自动清除覆盖物,数据变化覆盖物时时变化
在Map/index.js中
componentDidMount() {
const { ak } = this.props;
if (ak) {
this.getMapScript().then(this.init);
} else if (global.BMap) {
this.init(global.BMap);
} else {
console.warn('BMap is undefined');
}
}
觉得应该修改一下顺序
componentDidMount() {
const { ak } = this.props;
if (global.BMap) {
this.init(global.BMap);
}
else if (ak) {
this.getMapScript().then(this.init);
}
else {
console.warn('BMap is undefined');
}
}
Originally posted by @sundjly in #75 (comment)
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:
What is the expected behavior?
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.