❤
npm
Sign UpSign In

rc-tile-map

1.0.9 • Public • Published

地图

基于百度 Javascript API 的地图组件

何时使用

  • 需要显示或获取空间数据的时候。

  • 直接调起百度地图

浏览器支持

IE Chrome Firefox Opera Safari
IE 9+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

安装

npm install rc-tile-map --save

运行

# 默认开启服务器，地址为 ：http://localhost:8000/ 
 
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新 
npm run start
 
# 构建生产环境静态文件，用于发布文档 
npm run site
 
# 构建lib及dist 
npm run build
 
# 发布版本 
npm run pub
 

代码演示

在线示例：https://guxingke201.github.io/rc-tile-map/site/

初始化地图

地图初始化基础操作

import "rc-tile-map/lib/style/";
import { Map, NDMap } from "rc-tile-map";
let nowCenter = new NDMap.Point(116.332782, 40.007978);
class App extends React.Component {
  mapNow;
  constructor(props) {
    super(props);
    this.state = {
      center: "北京",
      zoom: 16,
      minZoom: 1,
      maxZoom: 17,
      mapType: BMAP_HYBRID_MAP,
      enableHighResolution: true,
      enableAutoResize: true,
      enableMapClick: true
    };
  }
  onClickMap = ({ type, target, point, pixel, overlay }) => {
    console.log("type:", type);
    console.log("target:", target);
    console.log("point:", point);
    console.log("pixel:", pixel);
    console.log("overlay:", overlay);
  };
  render() {
    return (
      <div className="tilemap-container-demo">
        <Map
          setComponentInstance={mapNow => {
            this.mapNow = mapNow;
          }}
          {...this.state}
          onClick={this.onClickMap}
          className="tilemap-demo"
          style={{ height: 501 }}
        />
        <button
          className="button-demo"
          onClick={() => {
            this.setState({
              center: new NDMap.Point(
                this.mapNow.getCenter().lng + 0.0005,
                this.mapNow.getCenter().lat
              )
            });
          }}
        >
          更新地图中心
        </button>
        <button
          className="button-demo"
          onClick={() => this.setState({ zoom: this.mapNow.getZoom() - 1 })}
        >
          更新缩放级别
        </button>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              viewport: {
                center: new NDMap.Point(
                  this.mapNow.getCenter().lng + 0.0005,
                  40.007978
                ),
                zoom: this.mapNow.getZoom() - 1
              }
            })
          }
        >
          更新视角
        </button>
        <button
          className="button-demo"
          onClick={() => this.setState({ maxZoom: 18 })}
        >
          更新最大缩放级别
        </button>
        <button
          className="button-demo"
          onClick={() => this.setState({ minZoom: 3 })}
        >
          更新最小缩放级别
        </button>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);
.tilemap-demo {
  width: 100%;
  height: 500px;
}
.tilemap-container-demo .button-demo {
  margin: 5px;
}

叠加图层

叠加图层

import { Map, NDMap, TileLayer } from "rc-tile-map";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showTileLayer: false,
      center: new NDMap.Point(116.332782, 40.007978),
      zoom: 16
    };
  }
  getTilesUrl = (tileCoord, zoom) => {
    var x = tileCoord.x;
    var y = tileCoord.y;
    return `//lbsyun.baidu.com/jsdemo/demo/tiles/${zoom}/tile${x}_${y}.png`; //根据当前坐标，选取合适的瓦片图
  };
  onClickAdd = () => {
    this.setState({
      showTileLayer: true
    });
  };
  onClickDel = () => {
    this.setState({
      showTileLayer: false
    });
  };
  render() {
    return (
      <section className="tilemap-container-demo">
        <Map
          disableDoubleClickZoom
          disableScrollWheelZoom
          center={this.state.center}
          zoom={this.state.zoom}
          className="tilemap-demo"
        >
          <TileLayer zIndex={3} getTilesUrl={this.getTilesUrl} />
          <TileLayer
            zIndex={1}
            tileUrlTemplate="//lbsyun.baidu.com/jsdemo/demo/tiles/{Z}/tile{X}_{Y}.png"
          />
          {this.state.showTileLayer ? (
            <TileLayer
              zIndex={4}
              tileUrlTemplate="//lbsyun.baidu.com/jsdemo/img/border.png"
            />
          ) : null}
        </Map>
        <button className="button-demo" onClick={this.onClickAdd}>
          添加网格图层
        </button>
        <button className="button-demo" onClick={this.onClickDel}>
          删除网格图层
        </button>
      </section>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);

添加覆盖物

添加覆盖物：标注（Marker）,信息窗口（InfoWindow）,自定义信息窗口（InfoBox）,简单信息窗口（SimpleInfoWindow）,折线（Polyline），多边形（Polygon），圆（Circle），文本标注（Label），图标（MarkerIcon）

import {
  Map,
  NDMap,
  Marker,
  InfoWindow,
  InfoBox,
  Polyline,
  Polygon,
  Circle,
  Label,
  MarkerIcon
} from "rc-tile-map";
var pStart = new NDMap.Point(116.392214, 39.918985);
var pEnd = new NDMap.Point(116.41478, 39.911901);
class App extends React.Component {
  markerValue;
  state = {
    common: {
      strokeColor: "red",
      strokeWeight: 3,
      strokeOpacity: 0.9,
      strokeStyle: "dashed",
      enableEditing: false,
      enableMassClear: true,
      enableClicking: true
    },
 
    marker: {
      enableMassClear: true,
      enableDragging: true,
      enableClicking: true,
      raiseOnDrag: true,
      draggingCursor: "move",
      rotation: -30,
      title: "marker demo",
      point: new NDMap.Point(116.404, 39.915)
    },
    showMapInfoWindow: false,
    infoWindowPoint: new NDMap.Point(116.404, 39.915),
    label: {
      style: {
        color: "red",
        fontSize: "12px",
        lineHeight: "20px",
        borderColor: "#ddd",
        boxShadow: "0 2px 6px #aaa",
        padding: "10px",
        borderRadius: "0",
        fontFamily: "微软雅黑"
      },
      offset: new NDMap.Size(20, -10)
    },
    markerIcon: {
      imageUrl: "//api0.map.bdimg.com/images/marker_red_sprite.png",
      size: new NDMap.Size(19, 25)
    },
    infoBox: {
      boxStyle: {
        width: "270px",
        height: "300px"
      },
      closeIconMargin: "1px 1px 0 0"
    }
  };
  onClickMap = ({ point, target, overlay }) => {
    // 点击地图是overlay是null,点击覆盖物不是null
    if (!overlay) {
      this.setState({ infoWindowPoint: point, showMapInfoWindow: true });
    }
  };
  render() {
    return (
      <div className="tilemap-container-demo">
        <Map className="tilemap-demo" zoom={15} onClick={this.onClickMap}>
          <Label
            position={new NDMap.Point(116.417854, 39.921988)}
            title="地图label"
            {...this.state.label}
          >
            欢迎使用百度地图，这是一个简单的文本标注哦~
          </Label>
          {this.state.showMapInfoWindow ? (
            <InfoWindow
              position={this.state.infoWindowPoint}
              enableCloseOnClick={false}
              title={this.state.infoWindowPoint.lat.toString()}
            >
              <span>{JSON.stringify(this.state.infoWindowPoint)}</span>
            </InfoWindow>
          ) : null}
          <Marker
            {...this.state.marker}
            setComponentInstance={markerValue => {
              this.markerValue = markerValue;
            }}
          >
            <InfoWindow title="天安门">
              <div className="global-maplabel-confirm">
                <p className="global-maplabel-text-main">xx</p>
                <p className="global-maplabel-text-sub">福州鼓楼</p>
              </div>
            </InfoWindow>
            <Label title="覆盖物label" {...this.state.label}>
              {`<p class="global-maplabel-text-main">xx</p><p class="global-maplabel-text-sub">福州鼓楼</p>`}
            </Label>
          </Marker>
          <Polyline
            points={[
              new NDMap.Point(116.399, 39.91),
              new NDMap.Point(116.405, 39.92),
              new NDMap.Point(116.425, 39.9)
            ]}
            {...this.state.common}
          />
          <Polygon
            points={[
              new NDMap.Point(116.387112, 39.920977),
              new NDMap.Point(116.385243, 39.913063),
              new NDMap.Point(116.394226, 39.917988),
              new NDMap.Point(116.401772, 39.921364),
              new NDMap.Point(116.41248, 39.927893)
            ]}
            fillColor="yellow"
            fillOpacity={0.3}
            {...this.state.common}
          />
          <Polygon
            points={[
              new NDMap.Point(pStart.lng, pStart.lat),
              new NDMap.Point(pEnd.lng, pStart.lat),
              new NDMap.Point(pEnd.lng, pEnd.lat),
              new NDMap.Point(pStart.lng, pEnd.lat)
            ]}
            fillColor="yellow"
            fillOpacity={0.3}
            {...this.state.common}
          />
          <Circle
            center={new NDMap.Point(116.404, 39.915)}
            radius={500}
            fillColor="yellow"
            fillOpacity={0.3}
            {...this.state.common}
          />
          <Marker
            point={new NDMap.Point(116.404, 39.908)}
            icon={
              new NDMap.Icon("//lbsyun.baidu.com/jsdemo/img/fox.gif", {
                size: new NDMap.Size(300, 157)
              })
            }
          >
            <MarkerIcon {...this.state.markerIcon} />
            <InfoBox {...this.state.infoBox}>
              <div className="infoBoxContent">
                <div className="title">
                  <strong>中海雅园</strong>
                  <span className="price">均价43000</span>
                </div>
                <div className="list">
                  <ul>
                    <li>
                      <div className="left">
                        <img src="//api.map.baidu.com/library/InfoBox/1.2/examples/house3.jpg" />
                      </div>
                      <div className="left">
                        <a target="_blank" href="//map.baidu.com">
                          中海雅园南北通透四居室
                        </a>
                        <p>4室2厅，205.00平米，3层</p>
                      </div>
                      <div className="rmb">760万</div>
                    </li>
                    <li>
                      <div className="left">
                        <img src="//api.map.baidu.com/library/InfoBox/1.2/examples/house1.jpg" />
                      </div>
                      <div className="left">
                        <a target="_blank" href="//map.baidu.com">
                          中海雅园四居室还带保姆间
                        </a>
                        <p>2室1厅，112.00平米，16层</p>
                      </div>
                      <div className="rmb">300万</div>
                    </li>
                    <li>
                      <div className="left">
                        <img src="//api.map.baidu.com/library/InfoBox/1.2/examples/house2.jpg" />
                      </div>
                      <div className="left">
                        <a target="_blank" href="//map.baidu.com">
                          《有钥匙 随时看》花园水系
                        </a>
                        <p>3室2厅，241.00平米，16层</p>
                      </div>
                      <div className="rmb">400万</div>
                    </li>
                    <li>
                      <div className="left">
                        <img src="//api.map.baidu.com/library/InfoBox/1.2/examples/house3.jpg" />
                      </div>
                      <div className="left">
                        <a target="_blank" href="//map.baidu.com">
                          富力城D区正规楼王大三居
                        </a>
                        <p>3室3厅，241.00平米，17层</p>
                      </div>
                      <div className="rmb">600万</div>
                    </li>
                    <li className="last">
                      <div className="left">
                        <img src="//api.map.baidu.com/library/InfoBox/1.2/examples/house1.jpg" />
                      </div>
                      <div className="left">
                        <a target="_blank" href="//map.baidu.com">
                          富力城豪，身份人士的象征
                        </a>
                        <p>4室2厅，213.90平米，25层</p>
                      </div>
                      <div className="rmb">700万</div>
                    </li>
                  </ul>
                </div>
              </div>
            </InfoBox>
          </Marker>
        </Map>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              marker: {
                ...this.state.marker,
                enableDragging: !this.state.marker.enableDragging
              }
            })
          }
        >
          {`更新标注：拖拽` + this.state.marker.enableDragging}
        </button>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              marker: {
                ...this.state.marker,
                point: new NDMap.Point(116.41, 39.915)
              }
            })
          }
        >
          更新标注：位置
        </button>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              common: { ...this.state.common, strokeColor: "blue" }
            })
          }
        >
          更新颜色
        </button>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              common: {
                ...this.state.common,
                enableEditing: !this.state.common.enableEditing
              }
            })
          }
        >
          {"更新编辑状态" + this.state.common.enableEditing}
        </button>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              markerIcon: {
                ...this.state.markerIcon,
                imageUrl: "//lbsyun.baidu.com/jsdemo/img/fox.gif",
                size: new NDMap.Size(300, 157)
              }
            })
          }
        >
          更新图标
        </button>
        <button
          className="button-demo"
          onClick={() => {
            console.log("this.markerValue", this.markerValue);
            alert(JSON.stringify(this.markerValue.getPosition()));
          }}
        >
          获取标注当前位置
        </button>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);
.global-maplabel-text-main {
  line-height:18px;
  font-size:12px;
  color:#666;
}
.global-maplabel-text-sub {
  line-height:18px;
  font-size:12px;
  color:#bbb
}
.infoBoxContent {
  font-size: 12px;
}
.infoBoxContent .title {
  background: url(//api.map.baidu.com/library/InfoBox/1.2/examples/title.jpg)
    no-repeat;
  height: 42px;
  width: 272px;
}
.infoBoxContent .title strong {
  font-size: 14px;
  line-height: 42px;
  padding: 0 10px 0 5px;
}
.infoBoxContent .title .price {
  color: #ffff00;
}
.infoBoxContent .list {
  width: 268px;
  border: solid 1px #4fa5fc;
  border-top: none;
  background: #fff;
  height: 260px;
}
.infoBoxContent .list ul {
  margin: 0;
  padding: 5px;
  list-style: none;
}
.infoBoxContent .list ul li {
  float: left;
  width: 255px;
  border-bottom: solid 1px #4fa5fc;
  padding: 2px 0;
}
.infoBoxContent .list ul .last {
  border: none;
}
.infoBoxContent .list ul img {
  width: 53px;
  height: 42px;
  margin-right: 5px;
}
.infoBoxContent .list ul p {
  padding: 0;
  margin: 0;
}
.infoBoxContent .left {
  float: left;
}
.infoBoxContent .rmb {
  float: right;
  color: #eb6100;
  font-size: 14px;
  font-weight: bold;
}
.infoBoxContent a {
  color: #0041d9;
  text-decoration: none;
}

添加控件

添加地图控件：比例尺控件（ScaleControl）,缩放平移控件（NavigationControl）,版权信息控件（CopyrightControl），地图定位控件（GeolocationControl）,切换地图类型控件（MapTypeControl）,缩略地图控件（OverviewMapControl），切换至全景地图控件（PanoramaControl）,自定义控件（CustomControl）。

import {
  Map,
  NDMap,
  ScaleControl,
  NavigationControl,
  CopyrightControl,
  GeolocationControl,
  MapTypeControl,
  OverviewMapControl,
  PanoramaControl,
  CustomControl
} from "rc-tile-map";
class App extends React.Component {
  mapNow;
  state = {
    common: {
      show: true
    }
  };
  onLocationSuccess = ({ point, addressComponent }) => {
    console.log("point:", point, "addressComponent:", addressComponent);
    // 定位成功事件
    var address = "";
    address += addressComponent.province;
    address += addressComponent.city;
    address += addressComponent.district;
    address += addressComponent.street;
    address += addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  };
  render() {
    return (
      <div className="tilemap-container-demo">
        <Map
          setComponentInstance={mapNow => {
            this.mapNow = mapNow;
          }}
          className="tilemap-demo"
          zoom={15}
          onClick={this.onClickMap}
        >
          <ScaleControl
            {...this.state.common}
            offset={new NDMap.Size(112, 26)}
            anchor={BMAP_ANCHOR_BOTTOM_LEFT}
          />
          <NavigationControl {...this.state.common} enableGeolocation />
          <NavigationControl
            {...this.state.common}
            anchor={BMAP_ANCHOR_TOP_RIGHT}
            type={BMAP_NAVIGATION_CONTROL_SMALL}
          />
          <CopyrightControl
            {...this.state.common}
            anchor={BMAP_ANCHOR_BOTTOM_RIGHT}
            copyright={{
              id: 1,
              content:
                "<span style='background-color:white;'>版权说明：清华校园图片取自互联网</span>"
            }}
          />
          <GeolocationControl
            {...this.state.common}
            onLocationSuccess={this.onLocationSuccess}
          />
          <MapTypeControl
            {...this.state.common}
            offset={new NDMap.Size(100, 10)}
            type={BMAP_MAPTYPE_CONTROL_MAP}
          />
          <OverviewMapControl
            {...this.state.common}
            offset={new NDMap.Size(10, 20)}
          />
          <PanoramaControl
            {...this.state.common}
            offset={new NDMap.Size(0, 200)}
          />
          <CustomControl
            {...this.state.common}
            offset={new NDMap.Size(360, 10)}
          >
            <div
              onClick={() => {
                this.mapNow.setZoom(this.mapNow.getZoom() + 2);
              }}
            >
              放大两级
            </div>
          </CustomControl>
          <CustomControl
            {...this.state.common}
            offset={new NDMap.Size(450, 10)}
          >
            <div
              onClick={() => {
                this.mapNow.setZoom(this.mapNow.getZoom() - 2);
              }}
            >
              缩小两级
            </div>
          </CustomControl>
        </Map>
        <button
          className="button-demo"
          onClick={() =>
            this.setState({
              common: {
                ...this.state.common,
                show: !this.state.common.show
              }
            })
          }
        >
          显示隐藏
        </button>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);

检索相关

位置检索（LocalSearch）、结果提示及自动完成类（Autocomplete）

import {
  Map,
  NDMap,
  CustomControl,
  AutocompleteMap,
  LocalSearch,
  Marker,
  MarkerIcon,
  SimpleInfoWindow,
  Label
} from "rc-tile-map";
import { Input, Button, Icon, Row, Col, Cascader, AutoComplete } from "antd";
const Option = AutoComplete.Option;
const Search = Input.Search;
const geoc = new NDMap.Geocoder();
let timer = null;
class App extends React.Component {
  mapNow;
  localSearchDiv;
  lastClickMarker;
  state = {
    hasSelect: false,
    keywordMap: null,
    keyword: null,
    mapState: {
      zoom: 15
    },
    markerState: {
      enableDragging: true
    },
    markerList: [],
    icon: {
      imageUrl: "//cdncs.101.com/v0.1/static/fish/image/markers_num.png"
    },
    label: {
      offset: new NDMap.Size(30, -15)
    },
    pointInfo: {
      point: null,
      title: "",
      region: "",
      address: ""
    },
    areaValue: "",
    areaValueCity: "",
    areaData: [
      {
        value: "浙江",
        label: "浙江",
        children: [
          {
            value: "杭州",
            label: "杭州"
          }
        ]
      },
      {
        value: "江苏",
        label: "江苏",
        children: [
          {
            value: "南京",
            label: "南京"
          }
        ]
      },
      {
        value: "福建",
        label: "福建",
        children: [
          {
            value: "福州",
            label: "福州"
          },
          {
            value: "莆田",
            label: "莆田"
          }
        ]
      }
    ],
    historyArray: ["福州市鼓楼区851大楼", "福州长乐", "福州亚太"],
    dataSource: []
  };
  componentDidMount() {
    this.setState({ dataSource: this.getOptions(this.state.historyArray) });
  }
  getTitle = (resultLoaction, firstPoint) => {
    let title = firstPoint.title;
    if (!title && resultLoaction && resultLoaction.surroundingPois && resultLoaction.surroundingPois.length > 0) {
      title = resultLoaction.surroundingPois[0].title;
    }
    return title || "未知地点";
  };
  updateMarkerItem = (uid, newPointInfo) => {
    this.setState({
      markerList: this.state.markerList.map(item => {
        if (item.uid === uid) {
          return { ...item, ...newPointInfo };
        } else {
          return item;
        }
      })
    });
  };
  setPositionInfo = (endPoint, uid) => {
    console.log("setPositionInfo endPoint:", endPoint);
    geoc.getLocation(endPoint.point, resultLoaction => {
      console.log("resultLoaction:", resultLoaction);
      const positionInfo = resultLoaction.addressComponents;
      this.updateMarkerItem(uid, {
        point: endPoint.point,
        address: resultLoaction.address,
        province: positionInfo.province,
        city: positionInfo.city,
        title: `${this.getTitle(resultLoaction, endPoint)}`
      });
    });
  };
  onClickItem = ({ type, target, item }) => {
    console.log("type:", type, "target:", target, "item:", item);
    // this.mapNow.clearOverlays();
    var positionInfo = item.value;
    this.setState({
      keywordMap:
        positionInfo.province + positionInfo.city + positionInfo.district + positionInfo.street + positionInfo.business
    });
  };
  onChangeKeyword = keyword => {
    console.log("onChangeKeyword keyword:", keyword);
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      this.setState({
        keyword: keyword || "",
        dataSource: !keyword ? this.getOptions(this.state.historyArray) : [] //没有关键字时使用历史记录
      });
    }, 200);
  };
  onClickMapInputSearch = keywordMap => {
    this.setState({
      keywordMap
    });
  };
  onAreaChange = areaValueArray => {
    const areaValue = areaValueArray && areaValueArray.join("");
    const areaValueCity = areaValueArray && areaValueArray[areaValueArray.length - 1];
    this.setState({
      areaValue,
      areaValueCity
    });
    geoc.getPoint(
      areaValue,
      point => {
        if (point) {
          this.setState({
            mapState: {
              ...this.state.mapState,
              zoom: 11,
              center: point
            }
          });
        }
      },
      areaValueCity
    );
  };
  getOptions = historyArray => {
    if (!historyArray || historyArray.length === 0) {
      return [];
    }
    return historyArray
      .map((historyItem, index) => (
        <Option key={index} value={historyItem}>
          <span>{historyItem}</span>
        </Option>
      ))
      .concat([
        <Option disabled key="del" className="del-item">
          <Button
            type="font"
            onClick={() => {
              this.setState({ dataSource: [], historyArray: [] });
            }}
          >
            清空搜索历史
          </Button>
        </Option>
      ]);
  };
  formatSearchData = searchResults => {
    let rows = searchResults.getNumPois();
    if (rows > 10) {
      rows = 10;
    }
    return Array(rows)
      .fill(0)
      .map((item, index) => searchResults.getPoi(index))
      .filter(item => !!item);
  };
  getOptionsBySearchResults = searchResults => {
    const countResult = searchResults && searchResults.getNumPois();
    console.log("countResult:", countResult);
    if (!searchResults || countResult === 0) {
      return [
        <Option disabled key="empty" className="empty-item">
          <p className="global-search-empty-text">未找到相关地点</p>
          <p className="global-search-empty-text">您还可以：</p>
          <ul className="global-search-empty-list">
            <li>检查输入是否正确或者输入其他词</li>
            <li>
              在网页中查找“<a
                className="global-search-empty-strong"
                target="_blank"
                href={`//www.baidu.com/s?wd=${searchResults.keyword}`}
              >
                {searchResults.keyword}
              </a>”
            </li>
            <li>进行意见反馈</li>
          </ul>
        </Option>
      ];
    } else {
      return this.formatSearchData(searchResults).map((item, index) => {
        return (
          <Option key={index} value={`${item.city}${item.district}${item.business}`}>
            <span>{`${item.business} `}</span>
            <span style={{ color: "gray" }}>{`${item.city}${item.district}`}</span>
          </Option>
        );
      });
    }
  };
  getMarker(pointInfo) {
    return (
      <Marker
        key={pointInfo.uid}
        {...pointInfo.markerProps}
        onClick={() => {
          if (this.state.hasSelect) {
            return;
          }
          if (this.lastClickMarker) {
            this.updateMarkerItem(this.lastClickMarker.uid, {
              iconProps: {
                ...this.lastClickMarker.iconProps,
                size: new NDMap.Size(20, 28),
                imageOffset: new NDMap.Size(-20 * this.lastClickMarker.iconProps.index, 0)
              },
              infoWindowProps: { show: false },
              markerProps: {
                ...this.lastClickMarker.markerProps,
                offset: new NDMap.Size(0, -10)
              }
            });
          }
          this.lastClickMarker = pointInfo;
          this.updateMarkerItem(pointInfo.uid, {
            iconProps: {
              ...pointInfo.iconProps,
              size: new NDMap.Size(28, 40),
              imageOffset: new NDMap.Size(-28 * pointInfo.iconProps.index, -28)
            },
            infoWindowProps: { show: true },
            labelProps: { show: false },
            markerProps: {
              ...pointInfo.markerProps,
              offset: new NDMap.Size(-4, -22)
            }
          });
          this.setState({
            mapState: {
              ...this.state.mapState,
              center: pointInfo.point
            }
          });
        }}
        onDragend={endPoint => {
          this.setPositionInfo(endPoint, pointInfo.uid);
        }}
        onMouseout={() => {
          setTimeout(() => {
            this.updateMarkerItem(pointInfo.uid, {
              labelProps: { show: false }
            });
          }, 0);
        }}
        onMouseover={() => {
          setTimeout(() => {
            this.updateMarkerItem(pointInfo.uid, {
              labelProps: { show: true }
            });
          }, 0);
        }}
      >
        <MarkerIcon {...pointInfo.iconProps} />
        <Label {...pointInfo.labelProps}>{`<p class="global-maplabel-text-main">${pointInfo.title ||
          ""}</p><p class="global-maplabel-text-sub">${pointInfo.province || ""}${pointInfo.city || ""}</p>`}</Label>
        {this.state.hasSelect ? null : (
          <SimpleInfoWindow
            {...pointInfo.infoWindowProps}
            contentEvents={{
              "confirmButton.click": (evt, markerInstance, infoWindowInstance) => {
                this.onClickMark(pointInfo, infoWindowInstance);
              }
            }}
          >
            <Row className="global-maplabel-wrap">
              <Col span={24} className="global-maplabel-content">
                <p className="global-maplabel-text-main">{`${pointInfo.title || ""}`}</p>
                <p className="global-maplabel-text-sub">{pointInfo.address || ""}</p>
              </Col>
              <Col span={8} className="global-maplabel-ctrl">
                <Button type="ghost" className="confirmButton">
                  确定
                </Button>
              </Col>
            </Row>
          </SimpleInfoWindow>
        )}
      </Marker>
    );
  }
  startSearch = keywordStart => {
    this.setState({
      hasSelect: false
    });
    if (keywordStart) {
      let historyArray = this.state.historyArray;
      if (!historyArray.includes(keywordStart)) {
        historyArray.push(keywordStart);
      }
      this.setState({ historyArray, markerList: [] });
      this.localSearchDiv.search(keywordStart);
    }
  };
  onLocalSearchComplete = results => {
    var firstPoint = results && results.getPoi(0);
    console.log("onLocalSearchComplete results:", results, firstPoint);
    if (firstPoint) {
      this.setState({
        mapState: {
          ...this.state.mapState,
          viewport: this.formatSearchData(results).map(item => item.point)
        },
        markerList: this.formatSearchData(results).map((item, index) => {
          item.iconProps = {
            ...this.state.icon,
            size: new NDMap.Size(20, 28),
            index,
            imageOffset: new NDMap.Size(-20 * index, 0)
          };
          item.labelProps = { ...this.state.label, show: false };
          item.infoWindowProps = { show: false };
          item.markerProps = {
            ...this.state.markerState,
            point: item.point,
            offset: new NDMap.Size(0, -10)
          };
          return item;
        })
      });
    } else {
      alert("没找到");
    }
  };
  onClickMark = (pointInfo, infoWindowInstance) => {
    //react事件和百度地图InfoWindow事件冲突了，目前采用这种方式绑定事件
    this.updateMarkerItem(pointInfo.uid, {
      iconProps: {
        ...pointInfo.iconProps,
        size: new NDMap.Size(28, 40),
        imageOffset: new NDMap.Size(0, -68)
      }
    });
    this.setState({
      hasSelect: true,
      markerList: this.state.markerList.filter(item => item.uid === pointInfo.uid)
    });
    infoWindowInstance.close();
  };
  render() {
    return (
      <div className="tilemap-container-demo">
        <Row style={{ height: 50 }}>
          <Col span={6}>
            <Cascader
              size="large"
              options={this.state.areaData}
              onChange={this.onAreaChange}
              placeholder="请选择地区"
            />
          </Col>
          <Col span={13} offset={1}>
            <AutoComplete
              filterOption={false}
              allowClear
              className="global-search"
              dropdownClassName="global-search-search-dropdown"
              size="large"
              dataSource={this.state.dataSource}
              onChange={this.onChangeKeyword}
              onSelect={value => {
                this.startSearch(value);
              }}
              placeholder={`在 ${this.state.areaValue || "全国"} 搜索`}
              optionLabelProp="value"
            >
              <Input id="divSearch" />
            </AutoComplete>
          </Col>
          <Col span={3} offset={1}>
            <Button
              className="search-btn"
              size="large"
              type="primary"
              onClick={() => {
                this.startSearch(this.state.keyword);
              }}
            >
              搜索
            </Button>
          </Col>
        </Row>
        <Map
          setComponentInstance={mapNow => {
            this.mapNow = mapNow;
          }}
          className="tilemap-demo"
          {...this.state.mapState}
        >
          {this.state.markerList
            ? this.state.markerList.map((itemMarkerData, index) => {
                return this.getMarker(itemMarkerData);
              })
            : null}
          <CustomControl anchor={BMAP_ANCHOR_TOP_RIGHT}>
            <Search
              placeholder="全国搜索"
              id="mapSearch"
              style={{ width: 200 }}
              onSearch={this.onClickMapInputSearch}
            />
          </CustomControl>
          <AutocompleteMap input="mapSearch" onOnconfirm={this.onClickItem} />
          <LocalSearch keyword={this.state.keywordMap} onSearchComplete={this.onLocalSearchComplete} />
          <AutocompleteMap
            location={this.state.areaValueCity}
            keyword={this.state.keyword}
            onSearchComplete={results => {
              console.log("divSearch AutocompleteMap results:", results);
              if (results && results.keyword) {
                this.setState({
                  dataSource: this.getOptionsBySearchResults(results)
                });
              }
            }}
          />
          <LocalSearch
            setComponentInstance={localSearchDiv => {
              this.localSearchDiv = localSearchDiv;
            }}
            location={this.state.areaValueCity}
            onSearchComplete={this.onLocalSearchComplete}
          />
        </Map>
        <div id="error-ie8" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);
.global-search-wrapper {
  padding-right: 50px;
}
 
.global-search {
  width: 100%;
}
 
/* ？ */
.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input:not(:last-child) {
  padding-right: 62px;
}
/* ？ */
.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix {
  right: 0;
}
 
.global-search-search-dropdown .ant-select-dropdown-menu-item {
  padding: 5px 12px 4px;
}
.global-search-search-dropdown .ant-select-dropdown-menu-item.del-item {
  text-align: right;
  cursor: default;
  border-top: 1px solid #ddd;
}
.global-search-search-dropdown .ant-select-dropdown-menu-item.del-item .ant-btn-font {
  font-size: 12px;
  color:#bbb;
  vertical-align:top;
  border:none;
  height:20px;
  line-height:20px;
}
.global-search-search-dropdown .ant-select-dropdown-menu-item.empty-item {
  cursor: default;
  padding: 16px 20px;
}
}
.global-search-search-dropdown .ant-select-dropdown-menu-item.custom-item {
  cursor: default;
}
.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix
  button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
 
.global-search-empty-text {
  line-height:24px;
  font-size:12px;
  color:#666;
}
.global-search-empty-list li {
  position:relative;
  padding-left:8px;
  line-height:20px;
  font-size:12px;
  color:#666;
}
.global-search-empty-list li:before {
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:2px;
  content:"";
  margin-top:-1px;
  background-color:#666;
}
.global-search-empty-strong {
  color:#3ba8f0;
}
.global-maplabel-wrap {
  position:relative;
  padding: 10px;
  padding-right: 54px;
}
.global-maplabel-ctrl {
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  width:54px;
  border-left:1px solid #ddd;
}
.global-maplabel-ctrl .confirmButton {
  width:100%;
  padding: 5px;
  border: none;
  font-size:12px;
  color: #3ba8f0;
  height: 100%;
  text-align:center;
}
.global-maplabel-ctrl .confirmButton:after {
  display: inline-block;
  vertical-align:middle;
  width: 0;
  height: 100%;
  content: "";
}
.global-maplabel-ctrl .confirmButton > span {
  display: inline-block;
  vertical-align:middle;
  margin: 0;
}

调起百度地图

Web 版百度地图面向 PC 浏览器的网站应用，调起的百度地图地址为：//map.baidu.com/ ；

import {
  MapLinkMarker,
  MapLinkDirection,
  MapLinkGeocoder,
  MapLinkLine,
  MapLinkPano,
  MapLinkPlaceDetail,
  MapLinkPlaceSearch
} from "rc-tile-map";
import { Icon, Tabs, Row, Col } from "antd";
const TabPane = Tabs.TabPane;
class App extends React.Component {
  state = {
    marker: {
      location: "26.097159,119.319762",
      title: "851大楼",
      content: "福州市鼓楼区温泉支路58号"
    }
  };
  render() {
    return (
      <Tabs defaultActiveKey="1">
        <TabPane tab="链接模式" key="1">
          <div className="tilemap-demo">
            <Row className="line-demo">
              <MapLinkMarker
                className="maplink-demo"
                style={{ color: "red" }}
                {...this.state.marker}
              >
                <Icon type="link" />
                在指定坐标点上显示名称"851大楼"，内容"福州市鼓楼区温泉支路58号"的信息窗口
              </MapLinkMarker>
            </Row>
            <Row className="line-demo">
              <MapLinkDirection
                className="maplink-demo"
                origin="latlng:26.097159,119.319762|name:我的公司"
                destination="亚太中心"
                mode="driving"
                region="福州"
              >
                <Icon type="link" />
                展示"福州市"从（lat:26.097159，lng:119.319762 ）"我的公司"到"亚太中心"的驾车路线
              </MapLinkDirection>
            </Row>
            <Row className="line-demo">
              <MapLinkGeocoder
                className="maplink-demo"
                address="福州市鼓楼区851大楼"
              >
                <Icon type="link" />
                显示“福州市鼓楼区851大楼”对应的坐标点
              </MapLinkGeocoder>
            </Row>
            <Row className="line-demo">
              <MapLinkGeocoder
                className="maplink-demo"
                location="26.097159,119.319762"
              >
                <Icon type="link" />
                逆地理编码坐标（lat:26.097159，lng:119.319762）后，以标注形式显示位置和地址信息
              </MapLinkGeocoder>
            </Row>
            <Row className="line-demo">
              <MapLinkLine
                className="maplink-demo"
                region="福州"
                name="地铁1号线"
              >
                <Icon type="link" />
                展示"福州市"地铁1号线
              </MapLinkLine>
            </Row>
            <Row className="line-demo">
              <MapLinkPano
                className="maplink-demo"
                ak="zIT2dNIgEojIIYjD91wIbiespAnwM0Zu"
                x={119.319642}
                y={26.096715}
                z={1}
              >
                <Icon type="link" />
                展示坐标（lat:26.096715，lng:119.319642）对应的全景点
              </MapLinkPano>
            </Row>
            <Row className="line-demo">
              <MapLinkPlaceDetail
                className="maplink-demo"
                uid="6a78257f421f66d3af31e5ad"
              >
                <Icon type="link" />
                展示通过LocalSearch查询获取到的uid为"6a78257f421f66d3af31e5ad"对应的详情页面
              </MapLinkPlaceDetail>
            </Row>
            <Row className="line-demo">
              <MapLinkPlaceSearch
                className="maplink-demo"
                query="停车场"
                location="latlng:26.097159,119.319762|name:我的公司"
                radius={1000}
              >
                <Icon type="link" />
                检索坐标（lat:26.097159，lng:119.319762，name:我的公司）周边1000m的停车场
              </MapLinkPlaceSearch>
            </Row>
            <Row className="line-demo">
              <MapLinkPlaceSearch
                className="maplink-demo"
                query="亚太中心 停车场"
                region="福州"
              >
                <Icon type="link" />
                在“福州”检索“亚太中心 停车场”
              </MapLinkPlaceSearch>
            </Row>
          </div>
        </TabPane>
        <TabPane tab="iframe模式" key="2">
          <iframe
            src={new MapLinkMarker().getLinkUrl(this.state.marker)}
            className="tilemap-demo"
          />
        </TabPane>
      </Tabs>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);
.maplink-demo {
  border: solid 1px gray;
  padding: 5px;
}
.tilemap-demo .line-demo {
  height: 50px;
}

API

密钥 ak 业务方使用时自己维护，快速入门

<!-- 直接调起百度地图不需要引入 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&s=1&ak=zIT2dNIgEojIIYjD91wIbiespAnwM0Zu"></script>

NDMap

相当于 BMap，未定义或已有组件满足不了时使用。百度地图部分 API 失效，下面 API 不会列出。

共同的 API

以下 API 为 所有地图组件共享的 API。

参数 说明 类型 默认值
on* on+百度地图事件名称 function -
setComponentInstance 设置组件实例 function -

地图 Map

参数 说明 类型 默认值
center 设置地图中心点，如果center类型为字符串，必须是城市名称 Point|string 北京
className 地图平台容器节点样式类名称 string -
disableDoubleClickZoom 是否禁用双击放大 boolean false
disableScrollWheelZoom 是否禁用滚轮放大缩小 boolean false
enableAutoResize 是否自动适应地图容器变化 boolean true
enableMapClick 是否开启底图可点功能 boolean true
id 地图平台容器节点 ID string -
mapType 地图类型，默认为 MapType BMAP_NORMAL_MAP
maxZoom 地图允许展示的最大级别 number -
minZoom 地图允许展示的最小级别 number -
style 地图平台容器节点样式 Object -
viewport 设置地图视野，相当于 center+zoom，viewport 优先生效 Point[]|Viewport -
zoom 设置地图的缩放等级 number 11

图层 TileLayer

参数 说明 类型 默认值
getTilesUrl 抽象。向地图返回地图图块的网址，图块索引由 tileCoord 的 x 和 y 属性在指定的缩放级别 zoom 提供。如果您在 TileLayerOptions 中提供了 tileUrlTemplate 参数，则可不实现此接口 function(tileCoord: Pixel, zoom: Number):string -
tileUrlTemplate 指定图块网址模板，该模板可以针对每个图块请求而展开，以根据现有的图块坐标系引用唯一的图块。模板的格式应该为：https://yourhost/tile?x={X}&y={Y}&z={Z}.png 其中 X 和 Y 分别指纬度和经度图块坐标，Z 指缩放级别，比如： https://yourhost/tile?x=3&y=27&z=5.png 如果您没有提供图块网址模板，您需要实现 TileLayer.getTileUrl()抽象方法 string -
zIndex 图层的 zIndex number -

标注 Marker

参数 说明 类型 默认值
children 设置 Marker 关联覆盖物，如 Label，InfoWindow ReactNode -
draggingCursor 拖拽标注时的鼠标指针样式。此属性值需遵循 CSS 的 cursor 属性规范 string -
enableClicking 是否响应点击事件 boolean true
enableDragging 是否启用拖拽 boolean false
enableMassClear 是否在调用 map.clearOverlays 清除此覆盖物 boolean true
icon 标注所用的图标对象 Icon marker_red_sprite.png
offset 标注的位置偏移值 Size -
point 必填，指定了图像标注所在的地理位置 Point -
raiseOnDrag 拖拽标注时，标注是否开启离开地图表面效果 boolean false
rotation 旋转角度 number -
shadow 阴影图标 Icon marker_red_sprite.png
show 是否显示组件 boolean true
title 鼠标移到 marker 上的显示内容 string -

信息窗口 InfoWindow

参数 说明 类型 默认值
children 设置信息窗口内容。支持 HTML 内容。 content 参数支持传入 DOM 结点 string|node -
contentEvents 内容事件绑定（格式是{key:function}，其中 key 为显示内容中 dom 元素的 className+事件名称，如：confirmButton.click） {key:function(evt, markerInstance, infoWindowInstance)}
enableAutoPan 是否开启信息窗口打开时地图自动移动 boolean true
enableCloseOnClick 是否开启点击地图关闭信息窗口 boolean true
height 信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为 0，则信息窗口的高度将按照其内容自动调整 number 0
maxWidth 信息窗最大化时的宽度，单位像素。取值范围：220 - 730 number -
offset 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的 infoWindowOffset 属性值，您可以为信息窗添加偏移量来改变默认位置 Size -
position 指定信息窗口所在的地理位置，没有放到 Marker 的 children 时，必填 Point -
show 是否显示组件 boolean true
title 信息窗标题文字，支持 HTML 内容 string -
width 信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为 0，则信息窗口的宽度将按照其内容自动调整 number 0

自定义信息窗口 InfoBox

参数 说明 类型 默认值
align 基于哪个位置进行定位，取值为[INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM] [INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM] INFOBOX_AT_TOP
boxClass 定义 infoBox 的 class string 'infoBox'
boxStyle 定义 infoBox 的 style,此项会覆盖 boxClass object {}
children 设置信息窗口内容。支持 HTML 内容。 content 参数支持传入 DOM 结点 string|node -
closeIconMargin 关闭按钮的 margin string '2px'
closeIconUrl 关闭按钮的 url 地址 string '//cdncs.101.com/v0.1/static/fish/image/close.png'
contentEvents 内容事件绑定（格式是{key:function}，其中 key 为显示内容中 dom 元素的 className+事件名称，如：confirmButton.click） {key:function(evt, markerInstance, infoWindowInstance)} {}
enableAutoPan 是否启动自动平移功能 boolean true
offset 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的 infoWindowOffset 属性值，您可以为信息窗添加偏移量来改变默认位置 Size new BMap.Size(0, 15)
show 是否显示组件 boolean true

自定义信息窗口 SimpleInfoWindow

参数 说明 类型 默认值
align 基于哪个位置进行定位，取值为[INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM] [INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM] INFOBOX_AT_TOP
boxClass 定义 infoBox 的 class string 'ant-map-maplabel'
boxStyle 定义 infoBox 的 style,此项会覆盖 boxClass object {}
children 设置信息窗口内容。支持 HTML 内容。 content 参数支持传入 DOM 结点 string|node -
closeIconMargin 关闭按钮的 margin string '2px'
closeIconUrl 关闭按钮的 url 地址 string '//cdncs.101.com/v0.1/static/fish/image/blank.gif'
contentEvents 内容事件绑定（格式是{key:function}，其中 key 为显示内容中 dom 元素的 className+事件名称，如：confirmButton.click） {key:function(evt, markerInstance, infoWindowInstance)} {}
enableAutoPan 是否启动自动平移功能 boolean true
offset 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的 infoWindowOffset 属性值，您可以为信息窗添加偏移量来改变默认位置 Size new BMap.Size(0, 43)
show 是否显示组件 boolean true

折线 Polyline

参数 说明 类型 默认值
enableClicking 是否响应点击事件 boolean true
enableEditing 是否启用线编辑 boolean false
enableMassClear 是否在调用 map.clearOverlays 清除此覆盖物 boolean true
points 设置折线的点数组，必填 Point[] -
show 是否显示组件 boolean true
strokeColor 折线颜色 string 'blue'
strokeOpacity 折线的透明度，取值范围 0 - 1 number 0.5
strokeStyle 折线的样式，solid 或 dashed string 'solid'
strokeWeight 折线的宽度，以像素为单位 number 2

多边形 Polygon

参数 说明 类型 默认值
enableClicking 是否响应点击事件 boolean true
enableEditing 是否启用线编辑 boolean false
enableMassClear 是否在调用 map.clearOverlays 清除此覆盖物 boolean true
fillColor 填充颜色。当参数为空时，折线覆盖物将没有填充效果 string 'white'
fillOpacity 填充的透明度，取值范围 0 - 1 number 0.5
points 设置多边型的点数组，必填 Point[] -
show 是否显示组件 boolean true
strokeColor 边线颜色 string 'blue'
strokeOpacity 边线的透明度，取值范围 0 - 1 number 0.5
strokeStyle 边线的样式，solid 或 dashed string 'solid'
strokeWeight 边线的宽度，以像素为单位 number 2

圆 Circle

参数 说明 类型 默认值
center 设置圆形的中心点坐标，必填 Point -
enableClicking 是否响应点击事件 boolean true
enableEditing 是否启用线编辑 boolean false
enableMassClear 是否在调用 map.clearOverlays 清除此覆盖物 boolean true
fillColor 圆形填充颜色。当参数为空时，折线覆盖物将没有填充效果 string 'white'
fillOpacity 圆形填充的透明度，取值范围 0 - 1 number 0.5
radius 设置圆形的半径，单位为米，必填 number -
show 是否显示组件 boolean true
strokeColor 圆形边线颜色 string 'blue'
strokeOpacity 圆形边线的透明度，取值范围 0 - 1 number 0.5
strokeStyle 圆形边线的样式，solid 或 dashed string 'solid'
strokeWeight 圆形边线的宽度，以像素为单位 number 2

文本标注 Label

参数 说明 类型 默认值
children 设置文本标注的内容。支持 HTML 字符串 string -
enableMassClear 是否在调用 map.clearOverlays 清除此覆盖物 boolean true
offset 文本标注的位置偏移值 Size -
position 指定文本标注的地理位置，没有放到 Marker 的 children 时，必填 Point -
show 是否显示组件 boolean true
style 设置文本标注样式，该样式将作用于文本标注的容器元素上。其中 styles 为 JavaScript 对象常量，比如： setStyle({ color : "red", fontSize : "12px" }) 注意：如果 css 的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor Object -
title 设置文本标注的标题，当鼠标移至标注上时显示此标题 string -
zIndex 设置覆盖物的 zIndex number -

标注图标 MarkerIcon

参数 说明 类型 默认值
anchor 信息窗口定位锚点。开启信息窗口时，信息窗口底部尖角相对于图标左上角的位置，默认等于图标的 anchor Size -
imageOffset 图片相对于可视区域的偏移值 Size -
imageSize 图标所用的图片的大小，此功能的作用等同于 CSS 中的 background-size 属性。可用于实现高清屏的高清效果 Size -
imageUrl 设置图片资源的地址 string -
infoWindowAnchor 信息窗口定位锚点。开启信息窗口时，信息窗口底部尖角相对于图标左上角的位置，默认等于图标的 anchor Size -
show 是否显示组件 boolean true
size 图标可视区域的大小 Size -

控件基类 MapControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor -
offset 设置控件停靠的偏移量 Size -
show 是否显示控件 boolean true

比例尺控件 ScaleControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_BOTTOM_LEFT
offset 设置控件停靠的偏移量 Size new BMap.Size(112, 26)
show 是否显示控件 boolean true

缩放平移控件 NavigationControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_TOP_LEFT
enableGeolocation 控件是否集成定位功能 boolean false
offset 设置控件停靠的偏移量 Size new BMap.Size(10, 10)
show 是否显示控件 boolean true
showZoomInfo 是否显示级别提示信息 boolean true
type 设置控件停靠的位置 NavigationControlType BMAP_NAVIGATION_CONTROL_LARGE

版权信息控件 CopyrightControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_BOTTOM_RIGHT
copyright 添加版权信息 Copyright -
offset 设置控件停靠的偏移量 Size new BMap.Size(5, 2)
show 是否显示控件 boolean true

地图定位控件 GeolocationControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_BOTTOM_LEFT
enableAutoLocation 添加控件时是否进行定位 boolean false
locationIcon 自定义定位中心点的 Icon 样式 Icon success-40x40.png
offset 设置控件停靠的偏移量 Size new BMap.Size(0, 50)
show 是否显示控件 boolean true
showAddressBar 是否显示定位信息面板 boolean true

切换地图类型控件 MapTypeControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_TOP_LEFT
mapTypes 控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型 MapType[] 全部类型
offset 设置控件停靠的偏移量 Size new BMap.Size(10, 10)
show 是否显示控件 boolean true
type 控件样式 MapTypeControlType BMAP_MAPTYPE_CONTROL_HORIZONTAL

缩略地图控件 OverviewMapControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_BOTTOM_RIGHT
isOpen 缩略地图添加到地图后的开合状态 boolean false
offset 设置控件停靠的偏移量 Size new BMap.Size(0, 0)
show 是否显示控件 boolean true
size 设置缩略地图的大小 Size new BMap.Size(150, 150)

切换至全景地图控件 PanoramaControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_BOTTOM_RIGHT
offset 设置控件停靠的偏移量 Size new BMap.Size(0, 0)
show 是否显示控件 boolean true

自定义控件 CustomControl

参数 说明 类型 默认值
anchor 设置控件停靠的位置 ControlAnchor BMAP_ANCHOR_TOP_LEFT
children 设置自定义控件内容。支持传入 DOM 结点 string|node -
offset 设置控件停靠的偏移量 Size new BMap.Size(10, 10)
show 是否显示控件 boolean true

位置检索 LocalSearch

参数 说明 类型 默认值
keyword 检索词变化时发起检索。当 keyword 为数组时将同时执行多关键字的查询，最多支持 10 个关键字。 string|string[] -
location 表示检索区域，其类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会优先在该城市内进行 Map | Point | string Map 实例
pageCapacity 结果列表添加完成后的回调函数。 参数： container: HTMLElement，结果列表所用的 HTML 元素 number -
renderOptions 结果呈现设置 RenderOptions -
searchOption forceLocal 表示是否将搜索范围约束在当前城市，customData 表示检索 lbs 云服务的数据 {forceLocal:Boolean, customData:CustomData} -
onInfoHtmlSet 标注气泡内容创建后的回调函数。 参数： poi: LocalResultPoi，通过其 marker 属性可得到当前的标注。 html: HTMLElement，气泡内的 Dom 元素 function -
onMarkersSet 标注添加完成后的回调函数。 参数： pois: Array，通过 marker 属性可得到其对应的标注 function -
onResultsHtmlSet 结果列表添加完成后的回调函数。 参数： container: HTMLElement，结果列表所用的 HTML 元素 function -
onSearchComplete 检索完成后的回调函数。 参数：results: LocalResult 或 Array 如果是多关键字检索，回调函数参数返回一个 LocalResult 的数组，数组中的结果顺序和检索中多关键字数组中顺序一致 function -

结果提示及自动完成类 Autocomplete

参数 说明 类型 默认值
input 文本输入框元素或其 id string | HTMLElement -
location 表示检索区域，其类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会优先在该城市内进行 Map | Point | string Map 实例
types 返回数据类型。两种设置方式，第一种为默认值（即设置值为空），将返回所有数据。如地图初始化为北京，在输入框中输入“小”，输入框下会出现包含“小”关键字的多种类型（如餐饮、地名等）的提示词条。第二种设置值为"city"，将返回省市区县乡镇街道地址类型数据。如地图初始化为北京，在输入框中输入“小”，输入框下会出现“小金县”的地点名称类的提示词条 string[] -
onSearchComplete 检索完成后的回调函数。 参数：results: LocalResult 或 Array 如果是多关键字检索，回调函数参数返回一个 LocalResult 的数组，数组中的结果顺序和检索中多关键字数组中顺序一致 function -

调起百度地图基类 BaseMapLink

下列所有 mapLink 组件都有这些参数。src 固定为“网龙网络控股有限公司”，output 固定为“html”。

参数 说明 类型 默认值
children 内容，必填 stirng|node -
className 链接节点样式类名称 string -
coord_type 坐标类型，可选参数。默认为 bd09 经纬度坐标。允许的值为 bd09ll、bd09mc、gcj02、wgs84。bd09ll 表示百度经纬度坐标，bd09mc 表示百度墨卡托坐标，gcj02 表示经过国测局加密的坐标，wgs84 表示 gps 获取的坐标。MapLinkPano 无此参数 string -
style 链接节点样式 Object -
target 特殊的文档重定向操作，可选值：_blank,_self,_parent,_top string '_blank'
zoom 展现地图的级别，默认为视觉最优级别。MapLinkPano 无此参数 number -

地图标点功能 MapLinkMarker

调用该接口可调起 PC 或 web 地图，且在指定坐标点上显示点的名称和内容信息。

参数 说明 类型 默认值
content 标注点显示内容 ，必填 string -
location 标注点经纬度，参数格式：lat<纬度>,lng<经度>，必填 stirng -
title 标注点显示标题，必填 string -

地址解析和反向地址解析（地址查询） MapLinkGeocoder

  • 地址解析：调用该接口可以在调起百度地图时，当前页面显示地址对应的坐标点。
  • 反向地址解析（地址查询）：调用该接口可调起 PC 或 Web 百度地图，经过逆地理编码后，以标注形式显示位置和地址信息。
参数 说明 类型 默认值
address 地址名称，location 为空时必填 string -
location 标注点经纬度，参数格式：lat<纬度>,lng<经度>，address 为空时必填 stirng -

POI（地点）搜索 MapLinkPlaceSearch

调用该接口可调起 PC 或 Web 百度地图，通过本地检索服务，以列表形式显示符合查询条件的点。

选择方式：地点搜索限定范围可以由 region、bounds 和 location + radius 方式进行，其中 bounds 优先级最高、region 优先级最低（与 web 服务保持一致）

参数 说明 类型 默认值
bounds 视野范围。参数格式：lat,lng<左下角>,lat,lng<右上角> string -
location 中心点经纬度。参数格式：lat<纬度>,lng<经度> stirng -
query 关键词，必填 stirng -
radius 检索半径 number -
region 城市名或县名 stirng -

POI 详情页展示 MapLinkPlaceDetail

调用该接口可调起 PC 或 Web 百度地图，通过 POI 详情查询服务，显示指定点的详情信息。

参数 说明 类型 默认值
uid POI 的 ID，必填 stirng -

公交、地铁线路查询 MapLinkLine

调用该接口可调起 PC 或 Web 百度地图，通过线路查询服务，以列表形式显示线路信息。

参数 说明 类型 默认值
name 线路名称，必填 stirng -
region 城市名或县名，必填 stirng -

公交、驾车、步行路线规划 MapLinkDirection

调用该接口可调起 PC 或 Web 百度地图，通过线路查询服务，以列表形式显示公交、驾车、步行路线规划。

origin 三种格式：

1、名称：天安门

2、经纬度：39.98871<纬度>,116.43234<经度>。

3、名称和经纬度：name:天安门|latlng:39.98871,116.43234

参数 说明 类型 默认值
destination 终点名称或经纬度，或者可同时提供名称和经纬度，此时经纬度优先级高，将作为导航依据，名称只负责展示。必填 stirng -
destination_region 终点所在城市或县。和 dorigin_region 一起使用。 stirng -
mode 导航模式，固定为 transit、driving、walking，分别表示公交、驾车和步行。必填 stirng -
origin 起点名称或经纬度，或者可同时提供名称和经纬度，此时经纬度优先级高，将作为导航依据，名称只负责展示。必填 stirng -
origin_region 起点所在城市或县。和 destination_region 一起使用。 stirng -
region 城市名或县名。当给定 region 时，认为起点和终点都在同一城市，除非单独给定起点 origin_region 或终点的城市 destination_region。 stirng -

全景服务 MapLinkPano

调用该接口可以在调起百度地图 api 时，当前页面显示对应的全景点。

参数 说明 类型 默认值
ac 是否显示相册控件。1 开启，0 关闭 number 1
ak 应用秘钥，必填 stirng -
h 水平角度 number 默认为该场景点最佳角度
iec 是否显示内部全景出口。1 开启，0 关闭 number 1
issc 是否显示内景场景切换控件。1 开启，0 关闭 number 1
lc 是否显示拓扑箭头。1 开启，0 关闭 number 1
nc 是否显示鱼骨控件。1 开启，0 关闭 number 1
p 垂直视角 number 默认为该场景点最佳角度
pid 显示该 id 的全景点。xy/pid/uid 三组参数必选一组 stirng -
uid 显示该 poi 的全景点。xy/pid/uid 三组参数必选一组 stirng -
x 经度，和 y 一起使用，显示该经纬周围最近的全景点。xy/pid/uid 三组参数必选一组 number -
y 维度，和 x 一起使用，显示该经纬周围最近的全景点。xy/pid/uid 三组参数必选一组 number -
z 场景缩放级别 number 3

Readme

Keywords

Package Sidebar

Install

npm i rc-tile-map

Repository

github.com/guxingke201/rc-tile-map

Homepage

github.com/guxingke201/rc-tile-map

Weekly Downloads

0

Version

1.0.9

License

MIT

Unpacked Size

3.74 MB

Total Files

59

Last publish

Collaborators

  • guxingke201
  • nicky_nd
Try on RunKit
Report malware