在react (antd-pro)中使用百度地圖

image.png

這是一個(gè)顯示地圖然后在地圖上選點(diǎn)然后返回所選的點(diǎn)的坐標(biāo)及地址的實(shí)驗(yàn),順便加了個(gè)搜索掷漱,部分參考網(wǎng)絡(luò)(來源不知道了額)
Bmap.js

/**
 * Created by XM on 2018/9/3.
 * @email xm@tqzgc.com
 */
import React, { Component } from 'react';
import { Input, Button } from 'antd';

/*
const locationIcon = {
  url: 'http://api0.map.bdimg.com/images/copyright_logo.png',
  size: { width: 100, height: 100 },
};
*/

export default class extends Component {
  constructor(props) {
    super(props);

    this.setMapRef = ref => {
      this.mapContainer = ref;
    };
  }

  componentDidMount() {
    this.createMapScript().then(this.initMap);
  }

  componentWillReceiveProps(nextProps) {
    if (this.inited) return;
    if (!this.mapLoaded) return;
    // console.log(nextProps.value, this.props.value)
    const { value } = nextProps;
    const { point: position = { lng: undefined, lat: undefined } } = value;
    const { point: prePosition = { lng: undefined, lat: undefined } } = this.props.value || {};

    if (position.lng && position.lat && !prePosition.lng && !prePosition.lat) {
      // console.log(position)
      const point = new global.BMap.Point(position.lng, position.lat);
      this.map.panTo(point);
      if (this.marker) {
        this.marker.setPosition(point);
      } else {
        this.marker = new global.BMap.Marker(point);
        this.map.addOverlay(this.marker);
      }
      this.inited = true;
    }
  }

  shouldComponentUpdate() {
    return !this.inited;
  }

  componentWillUnmount() {
    if (this.map) {
      this.map.removeEventListener('click', this.onMapClick);
      this.map = null;
    }
  }

  onMapClick = event => {
    const { onChange } = this.props;
    const { point } = event;
    // this.setState({ mapCenter: { lng: point.lng, lat: point.lat } });

    this.map.panTo(new global.BMap.Point(point.lng, point.lat));
    if (this.marker) {
      this.marker.setPosition(point);
    } else {
      this.marker = new global.BMap.Marker(point);
      this.map.addOverlay(this.marker);
    }

    const myGeo = new global.BMap.Geocoder();
    myGeo.getLocation(point, result => {
      if (onChange) onChange(result);
    });
  };

  onSearch = value => {
    if (!this.localSearch) {
      this.localSearch = new global.BMap.LocalSearch(this.map, {
        renderOptions: { map: this.map },
      });
    }
    this.localSearch.search(value);
  };

  onClear = () => {
    if (this.localSearch) {
      this.localSearch.clearResults();
    }
  };

  setCity = (city, zoom) => {
    this.map.setCenter(city);
    if (zoom) this.map.setZoom(zoom);
  };

  initMap = BMap => {
    // this.defaultCenter = getPoint(116.404, 39.915);
    // this.mapContainer = this.mapContainer || this.mapContainerRef.current;
    const { value } = this.props;
    const { point: position } = value || {};

    // console.log(this.props)

    const map = new BMap.Map(this.mapContainer, { enableMapClick: false });
    if (Object.keys(map).length === 0) return;
    map.enableScrollWheelZoom();
    const point = new BMap.Point(
      (position && position.lng) || 116.404,
      (position && position.lat) || 39.915
    );
    // console.log(point)
    map.centerAndZoom(point, 15);
    map.setDefaultCursor('pointer');

    map.addControl(new BMap.OverviewMapControl({ isOpen: true, size: new BMap.Size(140, 110) }));
    // map.addControl(new BMap.NavigationControl({type: global.BMAP_NAVIGATION_CONTROL_ZOOM}));
    map.addControl(new BMap.NavigationControl());

    // console.log(value);

    // map.addEventListener('tilesloaded', ()=>{
    // });
    if (position && position.lng && position.lat) {
      this.marker = new BMap.Marker(point);
      map.addOverlay(this.marker);
    } else {
      const myCity = new BMap.LocalCity();
      myCity.get(result => {
        // console.log(result)
        map.setCenter(result.name);
      });
    }
    map.addEventListener('click', this.onMapClick);

    this.map = map;
    this.mapLoaded = true;
  };

  createMapScript = () => {
    const ak = '你的accesskey';

    window.BMap = window.BMap || {};
    if (Object.keys(window.BMap).length === 0) {
      window.BMap.b_preload = new Promise(resolve => {
        const $script = document.createElement('script');
        document.body.appendChild($script);
        window.b_initBMap = () => {
          resolve(window.BMap);
          document.body.removeChild($script);
          window.BMap.b_preload = null;
          window.b_initBMap = null;
        };

        $script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=b_initBMap`;
      });
      return window.BMap.b_preload;
    }

    if (!window.BMap.b_preload) {
      return Promise.resolve(window.BMap);
    }
    return window.BMap.b_preload;
  };

  render() {
    const { width = '100%', height = 400, style } = this.props;

    return (
      <div style={{ border: 'solid 1px #e1e1e1', marginBottom: 16, borderRadius: 5 }}>
        <div>
          <Input.Search
            enterButton="查詢"
            size="small"
            style={{ width: '50%', minWidth: 240, marginBottom: 8, marginTop: 8, marginLeft: 8 }}
            onSearch={this.onSearch}
          />
          <Button type="dashed" size="small" style={{ marginLeft: 8 }} onClick={this.onClear}>
            清除
          </Button>
        </div>
        <div ref={this.setMapRef} style={{ width, height, ...style }} />
      </div>
    );
  }
}

import React, { Component } from 'react';
import Bmap from './Bmap.js';

class Demo extends Component {
  state = {pos: null};

  render(){
    const { pos } = this.state;
    return (
      <div>
        <Bmap value={pos} onChange={pos => this.setState({pos})} />
      </div>
    )
  }
}

export default Demo;
BMapDemo.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市缺厉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌隧土,老刑警劉巖提针,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異次洼,居然都是意外死亡关贵,警方通過查閱死者的電腦和手機(jī)遇骑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門卖毁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人落萎,你說我怎么就攤上這事亥啦。” “怎么了练链?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵翔脱,是天一觀的道長。 經(jīng)常有香客問我媒鼓,道長届吁,這世上最難降的妖魔是什么错妖? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮疚沐,結(jié)果婚禮上暂氯,老公的妹妹穿的比我還像新娘。我一直安慰自己亮蛔,他們只是感情好痴施,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著究流,像睡著了一般辣吃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上芬探,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天神得,我揣著相機(jī)與錄音,去河邊找鬼灯节。 笑死循头,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的炎疆。 我是一名探鬼主播卡骂,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼形入!你這毒婦竟也來了全跨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤亿遂,失蹤者是張志新(化名)和其女友劉穎浓若,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蛇数,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挪钓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了耳舅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碌上。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖浦徊,靈堂內(nèi)的尸體忽然破棺而出馏予,到底是詐尸還是另有隱情,我是刑警寧澤盔性,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布霞丧,位于F島的核電站,受9級(jí)特大地震影響冕香,放射性物質(zhì)發(fā)生泄漏蛹尝。R本人自食惡果不足惜后豫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望突那。 院中可真熱鬧硬贯,春花似錦、人聲如沸陨收。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽务漩。三九已至拄衰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間饵骨,已是汗流浹背翘悉。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留居触,地道東北人妖混。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像轮洋,于是被迫代替她去往敵國和親制市。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容