huiyan-fe / react-bmapgl Goto Github PK

map组件里面的React cloneElement 会引起子组件重新创建

https://api.map.baidu.com/getscript
getScript内部有段兼容代码有bug

此处的兼容代码没有考虑到element可能是null的情况

但实际上element可以是null

 return (
    <Map
      style={{ height: '100%', width: '100%' }}
      center={{ lng, lat }}
      heading={heading}  // 开启地图转角
      zoom={19} 
      tilt={70} // 开启地图倾斜角度
    ></Map>
  );

连续更新 center 的坐标 地图中心点不更新

关闭中心点移动效果

移动或改变DrawingManager生成的矩形框之后，组件的onOverlaycomplete事件的 e.overlay 是旧数据，而非移动之后的数据

const geolocation = new BMapGL.Geolocation()
geolocation.getCurrentPosition(result => {
  console.log(result) // null
})

之前项目用JavaScript API v2.0有获取值，但是在BMapGL API中就无效了。

设置之后，相对位置并没有变成最top

麻烦大佬了

搜索和地图进行联动的时候需要

尝试给marker添加右键菜单可是失败了,但是BMap是可以的,请问这个要怎么解决?

使用typescript时，提示marker的map、icon必填

export interface MapChildrenProps {
/** *地图实例，来自父元素<Map>的继承，无需手动传入 */
map: BMapGL.Map;
}

这里面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>
  );
}; 

貌似是在请求 //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.

如何离线使用绘图组件

https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget 中介绍有定位的按钮
请问本组件何时考虑加入？现在如果没有加入，有什么方法可以用到呢？

"@types/bmapgl": "^0.0.3",

NavigationControl, 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.

map.setCenter
map.panTo
map.centerAndZoom
map.setViewport
都有这个问题，有办法解决嘛？

react-bmapgl中要设置类似marker.setAnimation(BMAP_ANIMATION_BOUNCE);的效果，请问这个怎么设置

文字看不出来，图片很明显，一闪一闪的

代码

 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>

想使用MapVGL中的IconLayer.自定义icon

使用DrawingManager绘制好的图形如何再此编辑

[1] ----------------服务端报错------------------- ReferenceError: window is not defined
请修复window
将代码放在useEffect中使用

版本号

"react-bmapgl": "^0.1.28"

RT

{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没有触发

Uncaught TypeError: Cannot read properties of undefined (reading 'result')

react-bmapgl 下载完后,
html 存放<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
statr后 一直报这个错 请问是什么情况呢

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);

vscode报 找不到命名空间BMapGL

您好，请问Marker组件的onClick事件如何设置为单击显示InfoWindow，在js中可以调用openInfoWindow，那在组件中怎么调用这个方法嘛？

读取mapvgl.FlyLineLayer 会得到undefined

当前这个库支持vue吗？或者有推荐支持vue2，3版本的库吗？

navagationcontrol设置auchor 跟 offset 无效？

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，就没报错了

map.enableRotateGestures()此方法报错；
map.disableRotate()此方法无效

问题描述

想要实现地图的折线效果，但是根据文档发现react-bmapgl包里并没有BMapGL.Point相关方法：

文档地址：http://lbsyun.baidu.com/solutions/reactBmapDoc

截图：

源码截图：

"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: '广州'
}
}
]}
/>`

我使用的 浏览器端的 react-bmapgl/Map 库进行开发的 把Map组件放到 一个 antd 的 Modal 弹窗中 当我设置另一个 Modal 弹窗时 也会正常弹出地图界面并初始化 但是拖拽或缩放地图查看其他区域的时候 都是灰色

百度官网的demo居然有这个问题 切换到其他菜单 再切换回来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);
},
}}
/>

feel free to ask any questions

使用BMapGL 自定义setMapStyleV2时，在IE11 & chrome 81 等高版本时候拖动会白屏，请问下现在有解决方案吗？

离开使用地图的页面后，移动鼠标就报错
react-bmapgl 版本是0.1.25