• 本篇文章主要介绍的是 在React工程中 使用react-amap组件来写一个地图,地图上加一个点标记; 注意 :目前的本人发现在使用react-amap会对 umi 搭建的工程有所影响,建议使用原生高德api(document.ejs【可以看我的...
    本篇文章主要介绍的是 在React工程中  使用react-amap组件来写一个地图,地图上加一个点标记;
    
    ~~注意~~ :**目前的本人发现在使用react-amap会对 umi 搭建的工程有所影响,建议使用原生高德api(document.ejs【可以看我的上一篇博客,我有详细的写过怎么使用】)来自己手动做个地图可控组件,虽然稍微有点麻烦,但是毕竟项目上线这个方法比较安全。**
    
    下面看一下我的组件是怎么写的吧:
    npm install react-amap    先进行安装
    ```javascript
    import React from "react";
    import {Map,Marker} from 'react-amap';
    
    
    /*
     ps:{
        react-amap (api地址) : https://elemefe.github.io/react-amap/
     }
    */
    
    export default class extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
                mapZoom: 13, //地图缩放等级 (zoom)
                //https://lbs.amap.com/api/javascript-api/guide/abc/prepare这里有介绍key怎么申请
                mapKey: '。。。。。。。。',//Key就不贴出来了奥
                status: {
                    zoomEnable: false,
                    dragEnable: false,
                },
                mapCenter:[116.292329, 39.946996],//地图中心点
                mapMake :[116.273961, 39.946338],//marker标记点
            };
        }
    
        componentDidMount() {
    
        }
    
        render() {
            let {mapCenter, mapMake, mapZoom, mapKey, status} = this.state;
            return 
                {/*地图创建必有参数 (key,中心点,zoom等级)*/}
                
                    {/*marker标记点创建必有参数 (position中心点)*/}
                    
                
            
        }
    }
    ```
    本人在项目中发现问题后,很果断弃用组件的方式 使用原生来自己编写可控组件。各位同仁可根据自行需求来选取。
    
    展开全文
  • pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API。 react-amap 安装 1...
  • 当前高德地图的react版本 饿了么的react-amap项目地址为:https://github.comElemeFE/react-amap 新的react-amap-next项目地址:https://github.com/windsome/react-amap-next ,采用新方案,极少代码 当前react版本...
  • react-amap填坑指南 2018-06-14 14:53:34
    报错:XX is not a constructorreact-amap的版本得升级到 1.1.1及以上,支持加载 AMapUI 组件库1. react-amap版本卸载package.json里面"react-amap": "^1.2.7"2. amap版本根据react-amap文档...
  • 本文主要介绍高德react-native-amap3d组件的使用react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。 主要功能: 地图模式切换...
  • 1、由于在props中写明children时一个React.ReactNode类型(此类型代表children可以是任何类型),所以即使类型检查为array类型,在使用children.map()的时候认为children依旧时全类型,包含map方法。 2、这...
  • 使用组件: react-native-baidu-map 获取百度地图API_KEY 地址:http://lbsyun.baidu.com,在控制台成功创建应用后,就可以看到应用的api key了 安装 yarn add react-native-baidu-map 原生部分 Android配置 react...
  • react native map使用示例 2018-08-02 17:50:29
    map方法的作用难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * item; }...
  • react map遍历(截取部分重要代码) {this.state.images.map((img, i) => { return ( <div className="swiperBox" key={"img" + i}> <p className="swiperP"> Updat...
  • react中的map遍历 2016-10-24 15:58:57
    { this.state.reward.map(function (item) { return ( {item.num} {item.username} {item.rward_time}
  • 但是在使用map的时候,onClick无效并且出现了一些异常现象,话多说,看图: 一开始我的li是这样写的: 并且,改变this指向,如图 然后,我在函数里打印了一下: 结果给我把数据像是用了map一样,直接映射了出来...
  • reactjs 里map使用 2016-07-30 22:52:13
    react array map
  • 需要定位的地方的经纬度获取:  https://lbs.amap.com/console/show/picker import React from 'react';...import Map from 'react-amap/lib/map';//需要安装的模块 import Marker from 'react-amap/lib/...
  • 在调用amap的Geocoder Api 时,一直不能从AMap对象下找到Geocoder 的方法, 后来花了几个小时的时间找问题在哪 结果在index中引入链接时,需要在链接上配置plugin=AMap.Geocoder, 才能够在AMap调用...
  • 最近使用rn获取高德定位踩坑,rn中默认内置组件navigator.geolocation可以获取定位信息(注意默认百度坐标系,可能还需要转换坐标系),此时部分android机中会有兼容性问题,导致获取位置信息会超时,这时采用第三方...
  • 1. Install 安装npm install react-native-baidu-map --save2. 修改MainApplication.java 文件添加:new BaiduMapPackage(getApplicationContext())3. 修改android\app\src\main\AndroidManifest.xml文件&lt...
  • 最近开发是遇到的问题function NumberList(props) { const numbers = props.numbers; return ( {numbers.map((number) => ()} value={number} />
  • 需求 : react-native项目中需要使用高德地图组件;有基本的轨迹以及marker功能; react-native-amap-geolocation react-native-smart-amap react-native-amap3d react-native-maps … 对比了一些,感觉比较全的还是...
  • react-native-amap, 针对 iOS + Android响应本机AMap组件 react-native-amap针对 iOS + Android响应本机AMap组件react-native-amap-view是由react-native-maps激发的amap库的包装器,它可以在安卓和iOS中使用##Demo
1 2 3 4 5 ... 20
收藏数 29,579
精华内容 11,831