项目需要把高德地图替换成箩筐地图，WEB前端使用的ant design pro，高德地图有相关的react demo，而箩筐地图只有原生js，

结合上一篇文章【AntDesignPro】使用高德地图设置考勤区域，把高德地图修改为箩筐地图，实现考勤范围设置。

1 html使用箩筐地图

参考上一篇文章【html】箩筐地图的使用，设置考勤范围，了解实现考勤范围设置需要用到的箩筐地图接口。

2 ant design pro加载原生js

这个是实现功能的核心，只有js正确加载上了，地图的功能才能够正常使用。

结合ant design pro高德地图的使用，我们了解到了组件的componentDidMount()方法，是dom渲染成功后执行的方法，

我们继续在原js（此处是我使用高德地图的时候下载的组件，这次就在这个js文件里面修改）

我们可以在这个方法里面执行map地图的创建。

引用js的方法如下

var url =
      'https://webapi.luokuang.com/maps?ak=箩筐地图key&plugins=Geocoder&callback=onLoad';
    var jsapi = document.createElement('script');
    jsapi.src = url;
    document.head.appendChild(jsapi);

可以看到，js链接相比原链接多了callback参数，参数值是onLoad，如果不写这个参数，还是无法正常创建Map，

而onLoad对应的是window.onload方法，表示引用js后调用window.onLoad方法，代码如下：

window.onLoad = function () {
      var circle = null;
      var geocoderService = null;
      var position = new LKMap.LngLat(113.683182, 34.753023);
      var zoom = 15;
      var map = new LKMap.Map('container', {
        center: position, // 中心点
        zoom: zoom, // 缩放级别
        style: 'lkmap://styles/standard', // 地图样式
      });
  }

这样地图就可以正常显示了

（其他，项目手机端使用的是uniapp方法开发的，引用箩筐地图js的方法也类似）

js引用成功后，剩下的就可以参考原来的方法进行修改。主要还是注意js组件和页面的传值，获取坐标后需要传回页面控件。

3 全部代码

js组件全部代码如下

import React, { Component } from 'react';
import AmapLoader from '@amap/amap-jsapi-loader';
import './MapContainer.css';
import { ProForm, ProFormItem, ProFormText } from '@ant-design/pro-components';
import { Button, Col, Form, Input, message, Row } from 'antd';


class MapComponent extends Component {
    //获取页面传参
  constructor(props) {
    super(props);
  }

  //js组件向页面赋值的方法
  onChangeGps(value) {
    this.props.form.setFieldValue('gps', value);
  }
  
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    // 在此处添加需要执行的代码
    let that = this;
    var url =
      'https://webapi.luokuang.com/maps?ak=箩筐地图key&plugins=Geocoder&callback=onLoad';
    var jsapi = document.createElement('script');
    jsapi.src = url;
    document.head.appendChild(jsapi);

    window.onLoad = function () {
      var circle = null;
      var geocoderService = null;
      var position = new LKMap.LngLat(113.683182, 34.753023);
      var zoom = 15;
      var map = new LKMap.Map('container', {
        center: position, // 中心点
        zoom: zoom, // 缩放级别
        style: 'lkmap://styles/standard', // 地图样式
      });

      // 添加地图加载完成事件
      map.on('load', function () {
        geocoderService = new LKMap.Geocoder({
          size: 14,
        });

        // 地理编码
        function get_location() {
          var address = document.getElementById('address').value;
          if (address) {
            geocoderService.getLocation(address, function (status, result) {
              console.log(result);
              console.log(status);
              if (status == 'complete' && result.accuracy == true) {
                var gps = result.coordinates[0] + ',' + result.coordinates[1];
                console.log(gps);
                
                //document.getElementById('gps').value = gps; //此方法无效
                that.onChangeGps(gps); //需要使用此方法向页面传值
                
                var position = new LKMap.LngLat(result.coordinates[0], result.coordinates[1]);
                addCircle(position);
              } else {
                message.error('请输入正确的地址');
              }
            });
          } else {
            message.error('请输入正确的地址');
          }
        }

        //事件绑定
        document.getElementById('address_confirm').onclick = get_location;
      });

      var gps = document.getElementById('gps').value;
      if (gps) {
        var location = gps.split(',');
        position = new LKMap.LngLat(location[0], location[1]);
        map.setCenter(position);

        var radius = document.getElementById('radius').value;
        var num = get_zoom(radius);
        map.setZoom(num);

        addCircle(position);
      }

      /**
       * 添加覆盖物
       * @param position
       */
      function addCircle(position) {
        circle && circle.remove();
        map.setCenter(position);
        var radius = document.getElementById('radius').value;
        var num = get_zoom(radius);
        map.setZoom(num);
        circle = new LKMap.Circle({
          center: position,
          radius: radius, //半径
          strokeColor: '#F33', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 2, //线粗细度
          fillColor: '#ee2200', //填充颜色
          fillOpacity: 0.4, //填充透明度
          cursor: 'move', // 鼠标悬停时的鼠标样式
        });
        circle.setMap(map);
      }

      /**
       * 根据半径获取地图缩放级别
       * @param radius
       * @returns {number}
       */
      function get_zoom(radius) {
        var num = zoom;
        if (radius >= 1000) {
          num = 12;
        } else if (radius >= 800) {
          num = 13;
        } else if (radius >= 500) {
          num = 14;
        } else if (radius >= 200) {
          num = 15;
        } else if (radius >= 100) {
          num = 16;
        }

        return num;
      }
    };
  }

  render() {
    // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
    return (
      <div>
        <div id="container" className="map" style={{ height: '300px' }}></div>
      </div>
    );
  }
}
//导出地图组建类
export default MapComponent;

4 最后

箩筐地图在多个项目的替换都成功了，不过项目最终估计不会使用这个地图，可能还要更换，因为经过几天的测试，这个地图实在是太不稳定了，

获取地址坐标有时候成功，有时候不成功，有时候连续几次都成功，有时候连续几十次都不成功，严重影响用户体验。。。

不过还是希望箩筐地图能越做越好。

已上就是本次ant design pro 引用原生js，使用箩筐地图的全部内容。