React&百度地图

其他

AutoComplete-自动完成类

百度文档， 当前版本 input 仅支持传入文本框 id。

import React from "react";
import { render } from "react-dom";
import { Map, AutoComplete } from "rc-bmap";

const events = {
  onconfirm() {
    console.log("onconfirm");
  },
  onhighlight() {
    console.log("onhighlight");
  }
};

const container = {
  height: "100%"
};

const mapContainer = {
  height: "90%"
};

const searchComplete = () => {
  console.log("searchComplete");
};

render(
  <div style={container}>
    <div style={mapContainer}>
      <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom>
        <AutoComplete
          input="suggest"
          searchComplete={searchComplete}
          events={events}
        />
      </Map>
    </div>
    <input id="suggest" />
  </div>,
  document.getElementById("app")
);

更多

更多属性，可见API中的描述。

Tile-自定义图层

百度文档

属性类型描述
transparentPngboolean是否使用了带有透明信息的 PNG
tileUrlTemplatestring指定图块网址模板，该模板可以针对每个图块请求而展开，以根据现有的图块坐标系引用唯一的图块。模板的格式应该为：http://yourhost/tile?x={X}&y={Y}&z={Z}.png 其中 X 和 Y 分别指纬度和经度图块坐标，Z 指缩放级别，比如： http://yourhost/tile?x=3&y=27&z=5.png 如果您没有提供图块网址模板，您需要实现 TileLayer.getTileUrl()抽象方法。
copyright{ id, content, bounds }地图图层的版权信息
zIndexnumber图层的 zIndex
getTilesUrlfunction抽象。向地图返回地图图块的网址，图块索引由 tileCoord 的 x 和 y 属性在指定的缩放级别 zoom 提供。如果您在 TileLayerOptions 中提供了 tileUrlTemplate 参数，则可不实现此接口。
import React from "react";
import { render } from "react-dom";
import { Map, Tile } from "rc-bmap";

const getTilesUrl = (tileCoord, zoom) => {
  const x = tileCoord.x;
  const y = tileCoord.y;
  //根据当前坐标，选取合适的瓦片图
  return (
    "http://lbsyun.baidu.com/jsdemo/demo/tiles/" +
    zoom +
    "/tile" +
    x +
    "_" +
    y +
    ".png"
  );
};

const center = {
  lng: 116.332782,
  lat: 40.007978
};

render(
  <Map
    ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
    scrollWheelZoom
    center={center}
    zoom={16}
  >
    <Tile transparentPng getTilesUrl={getTilesUrl} />
  </Map>,
  document.getElementById("app")
);

convertPoint-坐标转换

百度文档

与百度略有不同的是，convertPoint的第一个参数为points，传入指定坐标点的字面量值，或数组。第二个参数为from，第三个参数为to，关于 from、to 的理解，可参考百度坐标转换 web api，返回值为Promise。

← 常量 →