前言

在我们平时的开发需求中，或多或少会遇到一些需要用到地图的地方。因此即小程序之后，我有拓展了以下React的Umi框架中使用高德地图。

地址
1、高德开发平台地图js API指南

相关文章
微信小程序中使用高德sdk

提示：以下是本篇文章正文内容，下面案例可供参考

效果展示

这里是一个卫星与网络图层。这里对图层不理解的请到官网中查看。
高德公众平台，图层文档地址

一、准备阶段

注册与申请key

1、在高德开放平台注册成为开发者
2. 登陆之后，在进入「应用管理」页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

准备页面阶段

这里主要使用Umi2.0版本做演示。

第一种写法

1、在Umi创建的项目中，在pages中添加document.ejs文件并粘贴下面代码到document.ejs文件上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>地图系统</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的key"></script> 
</head>
<body>
<noscript>Sorry, we need js to run correctly!</noscript>
<div id="root"></div>
</body>
</html>

注意：在上述代码中填写自己申请的key

2、找到需要使用地图的组件，在这里我们的是map组件，打开map组件。

import React from 'react'
import  './map.less'
import AMap from 'AMap'

class map extends React.Component {
   
  constructor(props) {
   
    super(props)
    this.state = {
   
      data: []
    }
  }
  componentDidMount(){
   
    var map = new AMap.Map('container',{
   
        zoom: 11,
        viewMode:'3D',//使用3D视图
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ]
    });
  }
  render() {
   
    return ( 
        <div>
            <div style={
   {
   width:'100%',height:500}} id="container"></div> 
        </div>
    );
  }
}
export default map

到这里他会出现了个问题，说找不到AMap这个包。这里给大家分析以下

我们可以看到我们是在document.ejs的head中使用引入高德的api的，并没有通过npm安装。所以这里我们需要做如下配置。

在根路径下找到.umirc.js这个文件
在其中添加如下代码即可
externals:{ 'AMap':'window.AMap' },

到这里我们看到页面上以及出现了地图了。

第二种写法（开发常用）

这里还有一种高逼格的写法。平时开发经常会用在的方法。

1、创建

在src路径下，创建一个plugins文件夹，在文件夹创建GdMapPlugin.js。文件代码如下：

export default (api) => {
   
    api.addHTMLHeadScript({
   
      type: "text/javascript",
      src: 'https://webapi.amap.com/maps?v=1.4.9&key=你的key',
    });
  };

2、进行配置

到这里我们需要去配置文件.umirc.js文件中进行如下配置。

在根路径下找到.umirc.js这个文件
在导出对象中添加如下代码
externals: { 'AMap': 'window.AMap' },
并在plugins中其中添加如下代码即可
[ './src/plugin/GdMapPlugin.js' ]

3、使用

到你需要使用地图的组件中。我的代码如下。

import React from 'react'
import  './map.less'
import AMap from 'AMap'

class map extends React.Component {
   
  constructor(props) {
   
    super(props)
    this.state = {
   
      data: []
    }
  }
  componentDidMount(){
   
    var map = new AMap.Map('container',{
   
        zoom: 11,
        viewMode:'3D',//使用3D视图
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ]
    });
  }
  render() {
   
    return ( 
        <div>
            <div style={
   {
   width:'100%',height:500}} id="container"></div> 
        </div>
    );
  }
}
export default map

就可以了。

总结

对于详细内容，我会在后续的学习中通过博客分享出来。如果等不及的小伙伴可以去官方平台逛一逛。

React插件篇：umi中使用高德地图（入门篇）

前言