zoukankan      html  css  js  c++  java
  • 在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 ={{"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 ={{"100%",height:"100%"}}>    
            <Map />
        </div>,
    
        document.getElementById("root")
    );
    

      

    5、执行 npm start运行项目:

    完工。

    6 说明

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

  • 相关阅读:
    docker 部署aps.net MVC到windows容器
    docker 搭建私有仓库 harbor
    解决关于:Oracle数据库 插入数据中文乱码 显示问号???
    ionic cordova build android error: commamd failed with exit code eacces
    cordova build android Command failed with exit code EACCES
    Xcode 10 iOS12 "A valid provisioning profile for this executable was not found
    使用remix发布部署 发币 智能合约
    区块链: 编译发布智能合约
    mac 下常用命令备忘录
    JQuery fullCalendar 时间差 排序获取距当前最近的时间。
  • 原文地址:https://www.cnblogs.com/zjw0901/p/11104292.html
Copyright © 2011-2022 走看看