在react中使用原生的高德地图

1、使用react-create-app创建一个新的react项目

2、修改index.html，添加以下script引用：

3、创建一个组件文件MapDemo.js，内容如下

import React, { Component } from "react";

class WebMapDemo extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount(){
        var map = new AMap.Map('container', {
            viewMode: '3D',
            pitch: 50,
            zoom: 11,
            center: [116.480766, 39.932931]
        });
    
        // 设置光照
        map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
        map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
    
        var object3Dlayer = new AMap.Object3DLayer();
        map.add(object3Dlayer);
    
        new AMap.DistrictSearch({
            subdistrict: 0,   //返回下一级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'city'  //查询行政级别为 市
        }).search('朝阳区', function (status, result) {
            var bounds = result.districtList[0].boundaries;
            var height = 5000;
            var color = '#0088ffcc'; // rgba
            var prism = new AMap.Object3D.Prism({
                path: bounds,
                height: height,
                color: color
            });
    
            prism.transparent = true;
            object3Dlayer.add(prism);
    
            var text = new AMap.Text({
                text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',
                verticalAlign: 'bottom',
                position: [116.528261, 39.934313],
                height: 5000,
                style: {
                    'background-color': 'transparent',
                    '-webkit-text-stroke': 'red',
                    '-webkit-text-stroke-width': '0.5px',
                    'text-align': 'center',
                    'border': 'none',
                    'color': 'white',
                    'font-size': '24px',
                    'font-weight': 600
                }
            });
    
            text.setMap(map);
        });
    }

    render() {
        return (
            <div id="container" style ={{width:"100%",height:"95%"}}>                
            </div>
        );
    }

}

export default WebMapDemo;

注意AMap类不是react中定义的类，会在运行时报错，因此需要参考我的另一篇随笔《配合react-amap使用原生高德地图》，将AMap类排除在eslint语法检查之外。

4、编写index.js，加载在3里编写的这个地图组件

import React from "react";
import ReactDOM from "react-dom";
import Map from "./MapDemo";

ReactDOM.render(
    <div style ={{width:"100%",height:"100%"}}>    
        <Map />
    </div>,

    document.getElementById("root")
);

5、执行 npm start运行项目：

扫描二维码关注公众号，回复： 6668329 查看本文章

完工。

6 说明

为了讲清逻辑，地图的创建和操作都写在了componentDidMount里面。各位自行进行性能优化。

在react中使用原生的高德地图

猜你喜欢