elemefe / react-amap Goto Github PK
View Code? Open in Web Editor NEW基于 React 封装的高德地图组件。AMap Component Based On React.
Home Page: https://elemefe.github.io/react-amap/articles/start
License: MIT License
基于 React 封装的高德地图组件。AMap Component Based On React.
Home Page: https://elemefe.github.io/react-amap/articles/start
License: MIT License
请问,组件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或者自定义由外部传入,而不是仅仅支持四种。
当点击 marker的时候,能获取该marker在markers里面的index吗?
或者如何在marker里添加除了坐标之外的额外信息,并且通过marker的click事件来获取
怎么调用搜索功能,我搜索了整个项目都找到AMap.DistrictSearch这个api
此插件,是否可以实现,给详细地址信息,直接定位到地图的准确位置,如果可以如何实现
首先,谢谢这个repo啊!
0.2.7
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]
虽然用起来没有问题,但估计有的人还是会有困扰吧....
个人建议仅供参考
https://unpkg.com/react-amap@VERSION/dist/react-amap.js
https://unpkg.com/react-amap@VERSION/dist/react-amap.min.js
我想在地图中再添加热力图,发现没有生效,
参照高德官网代码热力图
打印发现热力图的代码没有执行,是我的写法有问题么?
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.
在Markers的useCluster属性中,试图利用MarkerClustererOptions的renderCluserMarker属性,实现自定义点聚合时候的样式;
https://elemefe.github.io/react-amap/components/markers
MarkerClustererOptions中别的参数能生效,但是renderCluserMarker属性没有产生效果,使得目前无法实现 点聚合 时候的自定义样式;
const plugins = ['Scale', 'ToolBar'];
const components = ['SvgMarker'];
/* ... */
<Map plugins={plugins} components={components} />
现在发现只有基本的infoWindow, 如何加入原生的AdvancedInfoWindow?
1.0.1
macOS/Chrome 59
AMap有一些UI组件, 如http://lbs.amap.com/api/javascript-api/example/amap-ui-poipicker/index,
react-amap里可以调用这些API吗? 我看了自定义组件, 还是不知道怎么用AMapUI
0.2.7
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版本,和这个有关系吗?
0.2.7
macOS/Safari
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(),
);
}
显示的地图的marker会cluster成圆圈。
仅显示了markers,并没有cluster起来。
目前在API中不支持,能否支持一下?
react-amap 的plugins提供的5种插件没有markClusterer,还有其他方法调用高德的这个插件吗,试过直接调用高德的api,但是如何获取高德的AMap对象?通过 events.created获取的是实例。
v1.1.2
chrome 53
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.
0.2.7
macOS/Safari
无
如题 请问如果想加入这里的例子所示的https://lbs.amap.com/api/javascript-api/reference/plugin heapmap插件,如题如何调试?谢谢
`
import Map from 'react-amap'
this.state={
events:{
zoomchange: function (target) {
console.log(this.getZoom())
this.getZoom()
},
}
}
test=()=>{
//这里如何调用map,market的方法?
}
1.0.3
Chrome 60.0.3112.113
在Map组件中使用自定义组件。
ps:文档中已表明了目前支持的样式,但是没有自定义样式。然后,使用events的created(map),然后在里面map.setMapStyle并没有生效。
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>
)
}
}
比如有个功能点是以最合适的缩放级别和位置来显示地图上的一组Marker,
使用原始的高德API,我们可以这样做:
const markers = coordinates.map(position => new Marker({ map, position }))
const showAllMarkers = () => {
map.setFitView(markers)
}
使用React-AMap之后,要实现这种需求有什么好办法么?
好像说是没有支持 AMapUI
版本 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;
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.