huiyan-fe/react-bmap

基于百度地图JavaScript API封装的React组件库

react-bmap's Issues

MarkerList 动画不出来

示例效果，会有涟漪动画，如图

我的效果，没有动画，如图

代码是一样的，为什么不出动画呢？

<DrivingRoute/>组件调用报错

我的调用方式：

BMAP_DRIVING_POLICY_LEAST_TIME 这个参数未定义，应该怎么传参或者调用？

行车路线自动获得焦点问题

你好，我在地图上同时绘制了驾车路线和标注点，标注点和驾车路线在地图上离得比较远。当点击标注点出现提示后，地图会自动平移到驾车路线所在的区域，这该如何处理？

地图缩放级别设置失败，鼠标缩放后设置zoom={this.state.center.z}失效！

业务需求，点击标注点地图以标注点为中心并设置zoom={17}，第一次点击成功。然后使用鼠标缩放地图后再点击其它标注点，只是把标注点作为地图显示中心并没有设置地图缩放级别。（setZoom={{zoom: this.state.center.z}}地图原生属性设置无效）

this.state = {
center: {x: 121.502287, y: 31.24398, z: 11}
}

<Map
center={{lng: this.state.center.x, lat: this.state.center.y}}
zoom={this.state.center.z}

handleSelected(x, y, z){
this.setState({center: {x: x, y: y, z: z}});
}

Map组件不支持 LocalSearch 吗

我想做类似这个示例的功能
http://lbsyun.baidu.com/jsdemo.htm#a6_2

请问如何捕捉 地图上的点击事件?

让点击之后返可以回点击的位置信息，包括经纬度和中文地址？
万分感谢

NavigationControl组件显示异常

在type为BMAP_NAVIGATION_CONTROL_LARGE和BMAP_NAVIGATION_CONTROL_SMALL时会出现如图上的显示异常

NavigationControl NavigationControlType怎么设置

<Map center={{
lng: 105.403119,
lat: 38.028658
}}
zoom='5'
mapStyle={simpleMapStyle}>

代码中的控件类型怎么设置，比如NavigationControlType=BMAP_NAVIGATION_CONTROL_PAN，在react中怎么写呢

Marker图标icon不识别

按照文档想设置一个蓝色带数字的Marker，但是在项目里不识别

地图mapStyle问题

现在有一个需求是修改地图的mapStyle：

下拉框修改地图样式，但却没生效，不知为何，还望解答。谢谢

安装问题

npm install -S react-bmap 之后，卡住安装不了

Module not found: Can't resolve 'maptalks'

点击Marker弹出InfoWindow的问题

我想实现点击路径上的一个Marker，弹出一个InfoWindow，按照百度的api的写法，会报错。


是要按照你的插件的api来弹出InfoWindow吗？按照你的方式来写，该怎么写啊？

Road 组件

<Map style={{height: '200px'}} mapStyle={simpleMapStyle} center={{lng: 105.403119, lat: 38.028658}} zoom='5'>
            <Road 
            // category={[1, 3, 1, 3, 3, 3, 3, 1, 1]} 
            // splitList={{
            //    1: '#00c1a8',
            //    2: 'yellow',
            //    3: '#ff5e47'
            //}} 
            color='rgba(0,255,0,0.7)' 
            bgColor="rgba(255,255,255,0.1)"
            arrowColor='rgba(255,0,0,0.7)'
            lineWidth={10} 
            roadPath={[
                "116.488838,39.911212,116.489818,39.911292,116.490838,39.911387",
                "116.490838,39.911387,116.491164,39.911424,116.491454,39.911463,116.491707,39.911499,116.491926,39.911536,116.492145,39.911582,116.492374,39.911637,116.492781,39.911755,116.493174,39.911884,116.493791,39.912089,116.494033,39.91217,116.494171,39.912216",
                "116.494171,39.912216,116.494771,39.912415,116.495098,39.912526,116.495156,39.912544,116.495428,39.912634,116.49559,39.912688,116.4958,39.912758,116.496114,39.912863,116.496263,39.912913,116.496354,39.912943,116.496514,39.912997,116.496613,39.913029,116.496777,39.913084",
                "116.496777,39.913084,116.496997,39.913158,116.497585,39.913355",
                "116.497585,39.913355,116.497732,39.913434,116.498083,39.913551,116.498295,39.913652,116.49836,39.913686,116.498457,39.913737,116.498528,39.913779,116.498601,39.913832,116.498694,39.913925,116.498763,39.914018,116.498811,39.914114,116.498817,39.914134,116.498848,39.914243,116.498865,39.914342,116.498871,39.914375,116.498884,39.914527,116.498879,39.914676,116.498871,39.91473,116.498858,39.91482,116.498842,39.914863,116.49881,39.914955,116.498736,39.915081,116.498631,39.915198,116.498495,39.915309,116.498321,39.915415,116.498089,39.915526,116.497796,39.915617,116.497515,39.915734,116.497409,39.915771,116.497312,39.915814,116.497199,39.915898,116.497065,39.916021,116.496761,39.916372",
                "116.496761,39.916372,116.49673,39.916463",
                "116.49673,39.916463,116.496729,39.916465,116.496689,39.916608,116.496668,39.916691",
                "116.496668,39.916691,116.496647,39.916774",
                "116.496647,39.916774,116.496604,39.916953,116.496585,39.917192,116.49654,39.917395,116.496522,39.917438,116.496496,39.917537"
            ]} 
            onClick={(index)=>{console.log(index)}}
            />
        </Map>

代码里的 onClick={(index)=>{console.log(index)}} ,这个index是什么意思啊？另外 这里是不是想说的是 点击某条路，并打印这条路？

路线规划有吗

根据起点终点规划驾车路线

请问是否支持百度地图API中服务类的调用

比如http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a7b0

增加输入框搜索地址

您好，请问目前支持搜索某个地址，然后在地图显示位置点的功能吗 ？
感谢。

大佬们，如果能支持typescript，就完美了。

没有代码提示真的很难受

Readme 中 Hello World实例的问题

例子中，没有设置zoom属性，界面上不显示地图（空白），加上zoom属性是ok的。

如何设置默认地图样式为卫星地图 BMAP_SATELLITE_MAP

map-type-control中有如下options:

  ['anchor', 'offset', 'type', 'mapTypes']

然而尝试了以下代码，都没能改变地图类型

尝试一

<MapTypeControl
  type={BMAP_SATELLITE_MAP}
/>

尝试二

<MapTypeControl
   mapTypes={[BMAP_SATELLITE_MAP]}
/>

其中尝试二还会报错

Cannot set property 'onmouseover' of undefined

地图Maker->自定义覆盖物的transition问题

<Marker
            position={{lng: 116.402544, lat: 39.929543}}
            offset={new BMap.Size(10, -150)}>
<div style里写transition>

</div>
</Marker>

这个transition，在div改变样式的时候不能正确生效。不知何解，还望解答

该库是否不支持点聚合？

点聚合 的操作支持吗?

请问组件能实现点聚合的功能吗？如果能，怎么实现

因为项目需求，将会加载很多的点在地图上，怎么能实现点聚合的功能呢

驾车路线的起终点的提示框问题

你好！我想问一下

这个起点的弹窗我想改成InfoWindow那样的形式，可不可以？

百度地图3.0版本

请问现在支持百度地图3.0版吗？

Traffic Light Location

Is there any way I can know where a traffic light is located? I want to make a customized route that avoids them.

安装上后报错提示没有mapv maptalks 把这些都安装了还是报错

mapv.js?2ba4:220 Uncaught TypeError: Super expression must either be null or a function, not undefined

CustomOverlay的offset有问题，会导致marker自定义覆盖物位置不对

版本

V1.0.71

事故现场

<Marker position={{lng: item.lng, lat: item.lat}} offset={new window.BMap.Size(-175, -160)} 
     <div onClick={function(){alert(1)}} style={{width: '150px', height: '40px', lineHeight: '40px', background: 'red', textAlign: 'center'}}>自定义覆盖物</div>
</Marker>

当给Marker组件指定offset后，滚动缩放的时候，marker位置就不对了

看了下源码，应该是给_div设置left、top的地方出错了

CustomOverlay.prototype.draw = function(){
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x + this.offset.width + "px";
    this._div.style.top  = pixel.y + this.offset.height + "px";
}

这个是因为跨域吗？

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information

我怎么用不了，报错BMap is not defined

何时能支持Lite版本的百度地图?

Lite版本请参见:http://lbsyun.baidu.com/index.php?title=jspopularLiteV1

组件是否支持CSS-Modules

想在Map上中使用CSS-Modules的方式写样式：
import style from './style.css'
class Location extends Component {
render() {
return
<Map style={style.location} center={{lng: 105.403119, lat: 38.028658}} zoom='5'>
</Map>
}
}
export default Location
但是到了页面上发现样式没进来

map 初始化中心点不准

调用map.reset()重回地图，与默认center={{lng: 116.403981, lat: 39.91582}} 点位置不一样
怎么解决

MapvLayer上画的LineString，click事件有问题

1.我在地图上画了很多线。类似于一个城市的所有公交路线，然后methods中配置了click属性，click对应的函数中只有一句consloe.log。结果是在距离线比较远的地方点击，在控制台输出线的坐标而不是null，当然有些地方还是会输出null。（chrome 浏览器）

2.在microsoft edge中点击线条，会报错Object doesn't support property or method 'isPointInStroke'

支持绘制图形吗，类似于drawingManager

BMap is not defined in /react-bmap/lib/overlay/CustomOverlay.js

when

import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap';

I get BMap is not defined

20170825-10:50:52.498(8)? (STDERR) ReferenceError: BMap is not defined
W20170825-10:50:52.499(8)? (STDERR)     at Object.<anonymous> (#####/node_modules/react-bmap/lib/overlay/CustomOverlay.js:13:31)
W20170825-10:50:52.499(8)? (STDERR)     at Module._compile (module.js:409:26)
W20170825-10:50:52.500(8)? (STDERR)     at Object.Module._extensions..js (module.js:416:10)
W20170825-10:50:52.500(8)? (STDERR)     at Module.load (module.js:343:32)
W20170825-10:50:52.501(8)? (STDERR)     at Function.Module._load (module.js:300:12)
W20170825-10:50:52.502(8)? (STDERR)     at Module.require (module.js:353:17)
W20170825-10:50:52.502(8)? (STDERR)     at require (internal/module.js:12:17)
W20170825-10:50:52.503(8)? (STDERR)     at Object.<anonymous> (#####/node_modules/react-bmap/lib/components/marker.js:13:22)
W20170825-10:50:52.504(8)? (STDERR)     at Module._compile (module.js:409:26)
W20170825-10:50:52.505(8)? (STDERR)     at Object.Module._extensions..js (module.js:416:10)
=> Exited with code: 1

Uncaught ReferenceError: BMap is not defined

index.html

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>

package.json

  "dependencies": {
    "react-bmap": "^1.0.55",

React Components

import { Map } from 'react-bmap'

...
<Map center={{lng: 116.402544, lat: 39.928216}} zoom="12" />

runtime error:
Uncaught ReferenceError: BMap is not defined

优化文档建议

Marker InfoWindow等组件，事件回调都放在events对象下，文档应补充说明

请问添加热力图的话该怎么操作

http://developer.baidu.com/map/jsdemo.htm#c1_15
像这个Demo里面的
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data:points,max:100});
如何把heatmapOverlay附加到Map上呢

能不能支持异步地图

百度地图还是比较耗资源的，并且是默认同步请求
对于单页应用，如果等地图资源加载好了再显示页面，未免太慢了

CustomOverlay Markers does not support Events / BMap.Marker is not added if there is a CustomOverlay

If Marker contains children, BMap.Marker is not created andbindEvent is not called.

react-bmap/src/components/marker.js

Lines 163 to 173 in 1d4a005

	if ('children' in this.props) {
	this.marker = new CustomOverlay(position, this.renderChildren(), this.props.offset);
	map.addOverlay(this.marker);
	} else {
	var options = this.getOptions(this.options);
	options.icon = icon;
	this.marker = new BMap.Marker(position, options);
	this.bindEvent(this.marker, this.events);
	map.addOverlay(this.marker);
	this.bindToggleMeghods(this.marker, this.toggleMethods);

How to implement an off-line map？

My environment is react+webpack

Mac 下切换地图显示类型,在render的时候没有反应. Windows 是正常的

源码如下

export const BaiduMapView = withScriptjsBaidu({
key: '',
render: (B: any, props: BaiduMapViewProps) =>
<B.Map
center={props.curPostion}
zoom={16}
style={{ height: '100%' }}
enableScrollWheelZoom={true}
>
{props.path.map((v, i) => {
return <B.Polyline
key={i}
strokeColor='red'
path={v}
/>
})}

        <B.Marker position={props.curPostion}>
            {props.curPostion.lat == 0 && props.curPostion.lng == 0 ? null : <Car rotation={props.curPostion.roation} />}
        </B.Marker>
        <B.MapTypeControl />
    </B.Map>

})

其实地图的默认高度设置为document.body.scrollHeight 我觉得更合适一些

控件的 anchor属性如何设置才能生效？

以NavigationControl控件为例：

如果要将其放在右下角，应该怎样设置才是正确的？
以下都不成功：

1:
2:<NavigationControl anchor={"BMAP_ANCHOR_BOTTOM_RIGHT"} />

文本标签 点“”x“” 关闭，在缩放地图的时候会重新打开

~~ 文本标签‘’ 在 点“”x“” 关闭，在缩放地图的时候会重新打开

infoWindow的content不能支持react组件么？只能纯文本？

如图，给infoWindow的内容传入一个react组件，弹出Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 应该是不支持reactNode类型

Road覆盖物，在用鼠标拖动地图之后重影

chrome版本 71.0.3578.98（正式版本） （64 位）

CustomOverlay Markers 的事件在微信上没反应

按照说明文档，在自定义覆盖物上增加了click事件，在chrom，fixfox等浏览器上都正常，但在微信开发工具及微信上，都没反应，查看div的eventListener 也显示有click；
代码如下
infoWindow = (<Marker id='showMarker'
position={{lng: this.state.selectedLng, lat: this.state.selectedLat}}
offset={{width:-75, height:-60}}
events={{
click:(e) => {console.log('xxxxxxxxxx');}
}}
>
<div onClick={function(){alert(1)}}
style={{width: '150px', height: '40px', lineHeight: '40px',color:'#4c4c4c', background: '#fff', textAlign: 'center'}}>
{orgInfo.organizationAbbreviation}

);

请问有朋友遇到过吗；

地图背景没出来

html 中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=IyGVKYvZPosRG9BI1xwEonR80VVCwq"></script>

export default class BaiduMap extends Component { render() { return ( <Map center={{lng: 116.375523, lat: 39.918255}} zoom='15'> <Marker position={{lng: 116.375523, lat: 39.918255}} /> <NavigationControl /> <InfoWindow position={{lng: 116.375523, lat: 39.918255}} title='标题' text='内容' /> </Map> ) } }

图片