高德JSAPI使用

高德JSAPI使用

（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 **jscode **一起使用)

• 准备页面

JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用）

加载

JS API 2.0 版本提供了两种方案引入地图 JSAPI：

1. 使用官网提供的 JSAPI Loader 进行加载；
2. 以常规 JavaScript 脚本的方式加载；

使用示例

/**

• 获取所有省/直辖市信息 */

const AMap = window.AMap

AMap.plugin(‘AMap.DistrictSearch’, function () { const districtSearch = new AMap.DistrictSearch({ // 关键字对应的行政区级别，country表示国家 level: ‘country’, // 显示下级行政区级数，1表示返回下一级行政区 subdistrict: 3 })

// 搜索所有省/直辖市信息 districtSearch.search(‘中国’, function (status: any, result: any) { console.log(status, result) // 查询成功时，result即为对应的行政区信息 }) })

React

下载依赖

npm i @amap/amap-jsapi-loader --save

引入

import AMapLoader from '@amap/amap-jsapi-loader';

使用示例

class MapComponent extends Component{ constructor(){ super();
this.map ={}; } // 2.dom渲染成功后进行map对象的创建 componentDidMount(){ AMapLoader.load({ key:””, // 申请好的Web端开发者Key，首次调用 load 时必填 version:”2.0”, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins:[’’], // 需要使用的的插件列表，如比例尺’AMap.Scale’等 }).then((AMap)=>{ this.map = new AMap.Map(“container”,{ //设置地图容器id viewMode:”3D”, //是否为3D地图模式 zoom:5, //初始化地图级别 center:[105.602725,37.076636], //初始化地图中心点位置 }); }).catch(e=>{ console.log(e); }) } render(){ // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性； return (

          <div id="container" className="map" style={{ height: '800px' }} > 

          </div>
      );
} } //导出地图组建类 export default MapComponent;

Vue

……

---

可以结合 Echarts 渲染地图，如下

const Exp = window.AMapUI

Exp.loadUI([‘geo/DistrictExplorer’], function (DistrictExplorer: any) { const districtExplorer = new DistrictExplorer() districtExplorer.loadAreaNode(100000, function (error: any, areaNode: any) { if (error === ‘null’) { console.error(error) return } const mapData: any = {} mapData.type = ‘FeatureCollection’ mapData.features = areaNode.getSubFeatures() echarts.registerMap(‘china’, mapData) // 重新渲染 setNodeArr([]) }) })

import React, { FC, useEffect, useState } from ‘react’ import * as echarts from ‘echarts/core’ import { TitleComponent, // TitleComponentOption, ToolboxComponent, // ToolboxComponentOption, TooltipComponent, // TooltipComponentOption, VisualMapComponent, // VisualMapComponentOption, GeoComponent // GeoComponentOption } from ‘echarts/components’ import { MapChart // MapSeriesOption } from ‘echarts/charts’ import ReactECharts from ‘echarts-for-react’ import { CanvasRenderer } from ‘echarts/renderers’ import { loadDataFromName, nameToCode } from ‘@/components/ChinaMapGeo’ import SearchForm from ‘@/components/SearchForm’ import { SearchColumnsType } from ‘@/types/common’ import { SearchUserType } from ‘@/types/user’ // @ts-expect-error const Exp = AMapUI // @ts-expect-error const AMap = window.AMap

echarts.use( [TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent, GeoComponent, MapChart, CanvasRenderer] ) const Dashboard: FC = () => { const [nodeArr, setNodeArr] = useState<any[]>() const [mapType, setMapType] = useState('province') const [searchValues, setSearchValues] = useState() const [mapOnAddress, setMapOnAddress] = useState('china') const searchColumns: SearchColumnsType[] = [ { type: 'select', key: 'command', label: '命令类型', placeholder: '请选择' }, { type: 'select', key: 'value', label: '值类型', placeholder: '请选择' }, { type: 'select', key: 'url', label: 'url', placeholder: '请选择' } ]

// const node = [{ // name: ‘河北省’, // value: 100, // itemStyle: { // areaColor: ‘#fdd2e3’ // }, // label: { // show: true, // color: ‘#e4512d’ // }, // tooltip: { // formatter: (item: any) => { // return ${String(item.name)}节点数为: ${String(item.value)} // } // } // }] const opts: any = { tooltip: { trigger: ‘item’ }, series: [ { name: ‘节点分布图’, type: ‘map’, map: mapOnAddress, label: { show: false }, roam: true, center: mapOnAddress === ‘china’ ? [104.97, 36.71] : mapOnAddress === ‘海南省’ ? [109.839996, 19.03557] : undefined, zoom: mapOnAddress === ‘china’ ? 1.6 : mapOnAddress === ‘海南省’ ? 7 : 1, data: nodeArr, itemStyle: { areaColor: ‘rgba(128, 128, 128, 1)’, borderColor: ‘rgb(179, 179, 179)’, borderType: ‘dashed’, borderWidth: 1, shadowColor: ‘rgba(0, 0, 0, 0.5)’, shadowBlur: 10, shadowOffsetX: 2, shadowOffsetY: 2, opacity: 0.9 }, emphasis: { label: { show: true, color: ‘#e4512d’ }, itemStyle: { areaColor: ‘#fffcdc’ } }, select: { disabled: true } } ] }

useEffect(() => { AMap.plugin(‘AMap.DistrictSearch’, function () { console.log(2222) const districtSearch = new AMap.DistrictSearch({ // 关键字对应的行政区级别，country表示国家 level: ‘country’, // 显示下级行政区级数，1表示返回下一级行政区 subdistrict: 3 }) console.log(districtSearch)

  // 搜索所有省/直辖市信息
  districtSearch.search('中国', function (status: any, result: any) {
    console.log(status, result)
    // 查询成功时，result即为对应的行政区信息
  })
})   }, [])

useEffect(() => { getList() }, [searchValues])

useEffect(() => { Exp.loadUI([‘geo/DistrictExplorer’], function (DistrictExplorer: any) { const districtExplorer = new DistrictExplorer() districtExplorer.loadAreaNode(100000, function (error: any, areaNode: any) { if (error === ‘null’) { console.error(error) return } const mapData: any = {} mapData.type = ‘FeatureCollection’ mapData.features = areaNode.getSubFeatures() // mapData.features[2].properties.name = ‘掉地上’ console.log(mapData) echarts.registerMap(‘china’, mapData) // 重新渲染 setNodeArr([]) }) }) }, [])

const getList = async () => { const params = { …searchValues } console.log(params) }

const mapOnClick = (e: any) => { const code: any = nameToCode[e.name] if (typeof code !== ‘undefined’) { // 地图下钻 if (e.data === ‘undefined’ || e.data === undefined) return true Exp.loadUI([‘geo/DistrictExplorer’], function (DistrictExplorer: any) { const districtExplorer = new DistrictExplorer() districtExplorer.loadAreaNode(code, function (error: any, areaNode: any) { if (error === ‘null’) { console.error(error) return } const mapData: any = {} mapData.type = ‘FeatureCollection’ mapData.features = areaNode.getSubFeatures() console.log(mapData, ‘我是远程加载数据’) echarts.registerMap(e.name, mapData) const item: any = { name: mapData.features[0].properties.name, value: 100, itemStyle: { areaColor: ‘#fdd2e3’ }, label: { show: true, color: ‘#e4512d’ }, tooltip: { formatter: (item: any) => { return ${String(item.name)}节点数为: ${String(item.value)} } } } const arr: any = [item] setNodeArr(arr) setMapOnAddress(e.name) setMapType(‘city’) }) }) } else { // 地图上钻 const mapData = loadDataFromName(‘中国’) echarts.registerMap(‘china’, mapData) const item: any = { name: mapData.features[2].properties.name, value: 100, itemStyle: { areaColor: ‘#fdd2e3’ }, label: { show: true, color: ‘#e4512d’ }, tooltip: { formatter: (item: any) => { return ${String(item.name)}节点数为: ${String(item.value)} } } } const arr: any = [item] setNodeArr(arr) setMapOnAddress(‘china’) setMapType(‘province’) } }

// 查询 const handleSearch = async (v: SearchUserType) => { setSearchValues(v) } console.log(‘init’) return ( <div> {mapType === ‘province’ && <SearchForm columns={searchColumns} onSearch={handleSearch}/>} <ReactECharts option={opts} notMerge={true} lazyUpdate={true} theme={‘theme_name’}

    style={{
      width: '100%',
      height: 'calc(100vh - 240px)'
    }}


    onEvents={{
      click: (e: any) => mapOnClick(e)
    }}

  />
</div>   ) }

export default Dashboard