elemefe / react-amap Goto Github PK

请问，组件Markers 可以在点击聚合点时不弹窗，而是显示其下级Marker吗？谢谢

【使用场景】使用高德的自定义地图时，即mapStyle属性设置为类似amap://styles/9104b475b707060c9a89f69e10db86f4的值。如果地图背景颜色与库中定义的内层div背景色相差过大，会有一种闪的很明显的感觉。

【建议】建议将库中设置的背景色删除，或者设置为transparent。让用户设置背景颜色。类似

<div style={{backgroundColor: 'orange'}}>
  <Map></Map>
</div>

也可以给Map自定一个背景颜色属性。

【位置】库中使用的地图内层div背景色是#eee, 位置在react-amap->lib->map->index.js 452:71

const ComponentList = [
  Circle,
  GroundImage,
  InfoWindow,
  Markers,
  Marker,
  Polyline,
  Polygon,
  MouseTool
];
// ...
renderChildren() {
    return Children.map(this.props.children, (child) => {
      if (child) {
        if (ComponentList.indexOf(child.type) === -1) {
          return child;
        }
        return React.cloneElement(child, {
          __map__: this.map,
          __ele__: this.mapWrapper
        });
      }
      return child;
    });
  }

看源码中似乎规定写死了这几种组件，那如何自定义／扩充一个组件？

有没有导航功能啊，比如传入起始坐标，终点坐标，交通方式等参数后，生成路线？

react-amap version 1.0.3
OS/Browers version centos 7.4 版本 61.0.3163.100（正式版本） （64 位）
使用例子如下：
import { Map } from 'react-amap';
import React from 'react';
class ReactAmapShow extends React.Component{
render(){
return <div style={{width: '100%', height: '400px'}}>
<Map amapkey={'22fd6e60f6b3ca19cd2dd588b167647e'}/>

}
}

export default ReactAmapShow;
在浏览器中打开，报错如下：
bundle.js:123738 GET file://webapi.amap.com/maps?v=1.3&key=******&callback=__amap_init_callback net::ERR_FILE_NOT_FOUND
在谷歌上搜索了一下，是需要自己引入高德的js文件吗？

貌似高德自带的解绑好像没用

请问能否支持Geocoder或者自定义由外部传入，而不是仅仅支持四种。

如何绑定draw事件，实现绘多边形 呢？原生JS 是这样过写的：
。

当点击 marker的时候，能获取该marker在markers里面的index吗？

或者如何在marker里添加除了坐标之外的额外信息，并且通过marker的click事件来获取

react-amap version

OS/Browers version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

react-amap version

怎么调用搜索功能，我搜索了整个项目都找到AMap.DistrictSearch这个api

此插件，是否可以实现，给详细地址信息，直接定位到地图的准确位置，如果可以如何实现

首先，谢谢这个repo啊！

react-amap version

0.2.7

OS/Browers version

macOS/Chrome 58, 60

路况的字显示不完全

React AMap — 基于 React 的高德地图组件其中第二个例子：

hi,

地图中心：

      <Map 
        plugins={['ToolBar']} 
        center={{longitude: 120, latitude: 35}} 
      >

但高德官方 [地图显示-地图显示-示例中心-JavaScript API | 高德地图API](http://lbs.amap.com/api/javascript-api/example/map/map-show)是：

        center: [116.397428, 39.90923]

虽然用起来没有问题，但估计有的人还是会有困扰吧....

个人建议仅供参考

CDN 地址不存在

https://unpkg.com/react-amap@VERSION/dist/react-amap.js
https://unpkg.com/react-amap@VERSION/dist/react-amap.min.js

来源：https://elemefe.github.io/react-amap/articles/start

我想在地图中再添加热力图，发现没有生效，
参照高德官网代码热力图
打印发现热力图的代码没有执行，是我的写法有问题么？
render是这样写的

return (
      <div style={{ paddingTop: 30, display: 'flex'}} >
        <div style={{ width: '60%', height: 800, margin: 'auto' }}>
          <Map zoom={12} plugins={["ToolBar"]} events={this.mapEvents}>
              {/*{this.props.locations}*/}
          </Map>
        </div>
      </div>

mapEvents是这样的

this.amapEvents = {
      created(map) {
        _this.map = map;
        var points = [
          { "lng": 116.191031, "lat": 39.988585, "count": 10 },
          { "lng": 116.389275, "lat": 39.925818, "count": 11 },
          { "lng": 116.287444, "lat": 39.810742, "count": 12 },
          { "lng": 116.481707, "lat": 39.940089, "count": 13 },
          { "lng": 116.410588, "lat": 39.880172, "count": 14 },
          { "lng": 116.394816, "lat": 39.91181, "count": 15 },
          { "lng": 116.416002, "lat": 39.952917, "count": 16 }
        ];
        console.log('2');
        map.plugin(["AMap.Heatmap"], () => {
          _this.heatmap = new AMap.Heatmap(map);
          console.log('222')

          _this.heatmap.setDataSet({
            data: points,
            max: 100
          });
          console.log('333', _this.heatmap);
          _this.heatmap.show();
        })
        console.log('3', _this.heatmap);
      }
    };

在基于typescript的项目中使用react-amap，会提示找不到模块的声明文件，可能需要一个d.ts文件

error TS7016: Could not find a declaration file for module 'react-amap'. 'xxxnode_modules/react-amap/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-amap` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-amap';`

npm上目前也没用@types/react-amap可以用

npm install后，引入地图会有错误，提示lib中的css文件不能加载

你好，我打算实现地理编码的功能，看高德的文档，说是要引入AMap.Geocoder插件。请问一下，有没有引入插件的方法？

您好，我不知道怎么在咱们的插件中使用调用高德客户端的方法，您能指导一下么

需要用到路线规划功能 不知道如何下手

热力图Heatmap的dateSet属性
数据源data假设是：[{"lng":120.67185,"lat":31.283164,"count":4.0,"name":"如何能拿到这个name值？"},{"lng":116.385502,"lat":39.844509,"count":1.0,"name":"如何能拿到这个name值？"},{"lng":120.714894,"lat":31.318038,"count":1.0,"name":"如何能拿到这个name值？"}]

点击热力图区域时的回调函数：
mapClickCallback(e){
let lng = e.lnglat.lng;
let lat = e.lnglat.lat;
console.log(e);
}

如何在e对象中获取数据源中的name值？

Several of the dependencies for this project are outdated, making this module annoying to use for React 15+ versions.

From what I can detect this are the modules:

react-router imported: 3.0.2 latest: 4.2.0
isomorphic-style-loader version imported: 1.1.0 latest: 4.0.0

should use PropTypes from 'prop-types' and not from 'react' package.

What is Expected?

在Markers的useCluster属性中，试图利用MarkerClustererOptions的renderCluserMarker属性，实现自定义点聚合时候的样式；
https://elemefe.github.io/react-amap/components/markers

What is actually happening?

MarkerClustererOptions中别的参数能生效，但是renderCluserMarker属性没有产生效果，使得目前无法实现 点聚合 时候的自定义样式；

const plugins = ['Scale', 'ToolBar'];
const components = ['SvgMarker'];
/* ... */
<Map plugins={plugins} components={components} />

http://lbs.amap.com/api/javascript-api/guide/amap-ui/intro

react-amap version

OS/Browers version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

现在发现只有基本的infoWindow， 如何加入原生的AdvancedInfoWindow?

react-amap version

1.0.1

OS/Browers version

macOS/Chrome 59

AMap有一些UI组件, 如http://lbs.amap.com/api/javascript-api/example/amap-ui-poipicker/index,
react-amap里可以调用这些API吗? 我看了自定义组件, 还是不知道怎么用AMapUI

react-amap version

0.2.7

在 Edit fiddle - JSFiddle只加了

         AMap.plugin('AMap.ToolBar',() => {
          var tool = new AMap.ToolBar(); 
          _this.map.addControl(tool);
          _this.toolbar = tool;
         })

显示的是没有问题的。

但是在自己的工程中，就有点问题了

      {
        name   : 'ToolBar',
        options: {
          visible : true,  // 不设置该属性默认就是 true
          ruler   : true,
          onCreated(ins){
            //console.log(ins);
          },
        },
      }

ruler显示不出来（而且应该默认就是true），用onCreated把toolbar取出来，然后做类似
this.mapToolbar.showRuler()
仍然显示不了。
见其中第二个图： React AMap — 基于 React 的高德地图组件

另外，toolbar的默认位置变成了右下，也不是官方的左上。

jsfiddle上的react-amap是0.2.6版本，和这个有关系吗？

react-amap version

0.2.7

OS/Browers version

macOS/Safari

Reproduction Link

Steps to reproduce

class AMapboxViz extends React.Component {

  constructor(props){
    super(props);

    const markers = this.props.locations;
    this.state={
      useCluster: true,
    };

    this.state = {
      markers
    };
  }

  render(){
    return (
      <Map
        amapkey={'ba035e10b09acfc492d168adfd1b97cb'}
        center={{longitude: 110, latitude: 40}}
        zoom={5}
      >
        <Markers
          markers={this.state.markers}
          useCluster={this.state.useCluster}
        />
      </Map>
    );
  }
}

function amapbox(slice, json){
  const div = d3.select(slice.selector);
  div.selectAll('*').remove();
  ReactDOM.render(
    <AMapboxViz
      {...json.data}
    />,
    div.node(),
  );
}

What is Expected?

显示的地图的marker会cluster成圆圈。

What is actually happening?

仅显示了markers，并没有cluster起来。

目前在API中不支持，能否支持一下？

react-amap 的plugins提供的5种插件没有markClusterer，还有其他方法调用高德的这个插件吗，试过直接调用高德的api，但是如何获取高德的AMap对象？通过 events.created获取的是实例。

react-amap version

v1.1.2

OS/Browers version

chrome 53

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

我需要实现一个官方的例子：http://lbs.amap.com/fn/jsdemo_loader/?url=http%3A%2F%2Fwebapi.amap.com%2Fdemos%2Fgeocoder%2Fgeocoder-regeo.html

react-amap version

1.0.3

请教一下 AMap.CloudDataLayer 现在有方案能够使用么 ，浏览到#23
主要问题是 不知道在哪可以得到 AMap

when i use this commpont, I get a error, it's ：
window is not defined

this is my code：

import React from 'react';
import { Map } from 'react-amap';


export default function MapView() {
  return (
    <div style={{ width: '600px', height: '500px' }}>
      <Map amapkey={'xxxx'} />
    </div>
  );
}

I hope you can reply to me、 Thank you.

react-amap version

0.2.7

OS/Browers version

macOS/Safari

Reproduction Link

无

Steps to reproduce

What is Expected?

What is actually happening?

如题 请问如果想加入这里的例子所示的https://lbs.amap.com/api/javascript-api/reference/plugin heapmap插件，如题如何调试？谢谢

因为采用了阿里的dva脚手架，所以状态统一在model内管理了，city变化时候，但地图无变化，应该监听什么事件或者有什么处理方式？由于本人不是专业前端，只是一个后台开发者，描述不清楚的话，见笑了。

`
import Map from 'react-amap'

this.state={
events:{
zoomchange: function (target) {
console.log(this.getZoom())
this.getZoom()
},
}
}

test=()=>{
//这里如何调用map,market的方法？
}

您好 我正在用您的代码学习bisheng 有个问题想请教您

这个里面的 highlightedCode 和 preview 是如何注入到 pageData 中的啊？查阅了相关文档和代码都没有找到相关的内容

bisheng版本：0.24.1

谢谢

react-amap version

1.0.3

OS/Browers version

Chrome 60.0.3112.113

Reproduction Link

Steps to reproduce

What is Expected?

在Map组件中使用自定义组件。

What is actually happening?

ps：文档中已表明了目前支持的样式，但是没有自定义样式。然后，使用events的created(map),然后在里面map.setMapStyle并没有生效。

react-amap version

• react-amap 1.0.2

OS/Browers version

• macOS Sierra 10.12.5
• Chrome 版本 60.0.3112.90（正式版本） （64 位）

Reproduction Link

• 因为一些原因不方便贴链接，直接放代码和截图好了

Steps to reproduce

• 同上

Code

export default class MapArea extends Component {
  constructor(){
    super();

    this.mapPlugins = ['ToolBar'];
    this.mapEvents = {
      click: (e) => {
        this.props.changePosition(e.lnglat);
      }
    }
  }

  render(){
    const polylineArr = this.props.roads.map((item, index) => {
      return(
        <Polyline
          key={`polyline${index}`}
          path={[{
              longitude:item.coordinates[0][0],
              latitude: item.coordinates[0][1],
            }, {
              longitude:item.coordinates[1][0],
              latitude: item.coordinates[1][1],
            }]}
          style={{strokeColor: '#f00', strokeOpacity: 0.5+0.5*Number.parseFloat(item.probability), strokeWeight: 7}}
        />
      )
    });

    return (
      <div>
        <div style={style.mapArea}>
          <Map plugins={this.mapPlugins} center={this.props.position} events={this.mapEvents} zoom={17}>
            <Marker
              position={this.props.position}
            />
            {polylineArr}
          </Map>
        </div>
      </div>
    )
  }
}

What is Expected?

• 一个 react-amap，在上面画一些线条
• 上一轮查询 this.props.roads.length = 16，画出 16 条线
• 本轮查询 this.props.roads.length = 1，画出 1 条线，同时清除掉上一轮的 16 条线。

What is actually happening?

• 上一轮的 16 条线只有第 1 条被清除且重绘了，其他 15 条没有被清除，仍在地图上。

Screenshot

上一轮查询，ui + 控制台

本轮查询，ui + 控制台

比如有个功能点是以最合适的缩放级别和位置来显示地图上的一组Marker，
使用原始的高德API，我们可以这样做：

const markers = coordinates.map(position => new Marker({ map, position }))
const showAllMarkers = () => {
  map.setFitView(markers)
}

使用React-AMap之后，要实现这种需求有什么好办法么？

react-amap version

OS/Browers version

Reproduction Link

Steps to reproduce

好像说是没有支持 AMapUI

What is Expected?

What is actually happening?

版本 1.0.1
macOS/Chrome 53

我看了没有提供 UI组件库API （没有引用）；我想尝试修改源码，增加创建一个script元素
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
因此我做了一下尝试：
一、直接在index.html文件上增加以下标签，原生增加
`<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key="></script>

AMapUi可以正常使用，轨迹展示成功运行，但是react-amap提供的能力全部失效，应该是变量被覆盖了

二、深入react-amap源码，寻找创建script元素的地方，增加一个方法 创建引入ui库的script
源码位置

新增如下：
var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.defer = true; script.src = this.getScriptSrc(_config); //创建引入 amapui api (新增) const amapui = () => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "//webapi.amap.com/ui/1.0/main.js?v=1.0.11"; console.log(script); } var scriptLoadingPromise = new Promise(function (resolve, reject) { window[_config.callback] = function () { queuedLoader.forEach(function (event) { return event(); }); //amap成功创建后，创建amapui的 console.log(script); amapui(); resolve(); }; script.onerror = function (error) { return reject(error); }; }); document.head.appendChild(script); __script_loaded = true; return scriptLoadingPromise; }

结果：react-amap正常使用，AMapUI依然没有定义（但是我已经创建了啊）

我看的你vue 相关的创建方式
vue创建amapui的方式

需求：请问我应该如何创建引入AMapUi才能正常使用？

我已经找到问题了，低级错误，创建了script DOM元素，却没有插入页面
修改如下：
const amapui = () => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "//webapi.amap.com/ui/1.0/main.js?v=1.0.11"; document.head.appendChild(script) //插入页面 console.log(script); }
存在的问题：AMapUi不在受react生命周期控制，无法时时更新数据
期望：希望维护者提供更加优雅的方式，谢谢

官方提供的示例都打不开了。。。

一个例子参考如何使用AMap.Geocoder以及相应的 jsfiddle 示例 这里的示例打不开

RT
初始值设置为true

<PolyEditor active={true} ... />

然后更改active的属性，发现编辑功能依然可用

如何给热力图区域添加文字说明？

地图是渲染出来了，但是浏览器报如下错误：

Warning: Map: `key` is not a prop. 

Trying to access it will result in `undefined` being returned.

 If you need to access the same value within the child component, you should pass it as a different prop.

我的代码如下(key-在这里我随便写了)：

import React, { Component } from 'react';
import { Map } from 'react-amap';

class App extends Component {
  render() {
    return (
        <div style={{width: '600px',height: '500px'}}>
          <Map key={"dsafs34132424"} />        
        </div>
    );
  }
}
export default App;