[map] 百度地图 #React

Contact.jsx

class Contact extends React.Component {


    componentDidMount() {
        this.initMap();
    }


    initMap = () => {
        // 百度地图API功能
        let map = new BMap.Map("dituContent");


        let point = new BMap.Point(113.733216,34.608829);//定义一个中心点坐标
        map.centerAndZoom(point, 12);


        // 创建地址解析器实例
        let myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(CTYPE.addr_cn, (point) => {
            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMap.Marker(point));
                map.addControl(new BMap.NavigationControl());


                let myIcon = new BMap.Icon('http://webmap0.map.bdstatic.com/wolfman/static/common/images/us_cursor_9517a2b.png', new BMap.Size(135, 87), {
                    offset: new BMap.Size(10, 25), // 指定定位位置
                    imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                });
                let marker = new BMap.Marker(point, {
                    icon: myIcon
                }); // 创建标注
                map.addOverlay(marker);


            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "郑州市");
    };


    render() {
        return <div className='about-contact'>


            <div className='t-title'>联系我们</div>


            <div className='inner'>


                <ul className='contacts'>
                    <li>
                        <i/>
                        <div className='info'>
                            <p>产品顾问</p>
                            <span>{CTYPE.addr_cn}</span>
                        </div>
                    </li>
                    <li>
                        <i/>
                        <div className='info'>
                            <p>售后支持</p>
                            <span>{CTYPE.addr_cn}</span>
                        </div>
                    </li>
                </ul>


                <div className='baidu-map'>
                    <div className='inner'>
                        <div className='addr'>{CTYPE.addr_cn}</div>
                        <div className='map' id="dituContent"></div>
                    </div>
                </div>


            </div>
        </div>
    }
}
<script type="text/javascript"
        src="//api.map.baidu.com/api?v=2.0&ak=0E581024176a800e379b52921af17d35"></script>