一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)

简介: 文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。

首先说明一下,下面的流程只是个人摸索and看文档梳理出来的,并不作为完全正确的流程。

首先,注册 高德开放平台

没有注册的可以点击右上角点击注册;
在这里插入图片描述
我们点个人的就ok;
在这里插入图片描述
信息完善之后我们到控制台,点击 应用管理 --> 我的应用 --> 创建新应用即可;
在这里插入图片描述
输入Key名称和服务平台(我这里选择的是 web段JS API )就可以看到生成了一个列表,其中Key列就是我们需要用到的。

其次,项目中使用

我们直接使用第三方的包来实现引入;

npm  i @amap/amap-jsapi-loader

然后就是我们在项目中的使用啦;

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

页面代码:


import React, {
    Component } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import '../index.scss'
class  MapComponent extends Component{
   
    constructor(){
   
        super();      
        this.map ={
   };
    }
    // 2.dom渲染成功后进行map对象的创建
    componentDidMount(){
   
        AMapLoader.reset()  //需要把这个reset一下
        AMapLoader.load({
   
            key:"",   // 申请好的Web端开发者Key,首次调用 load 时必填
            version:"2.0",              // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
            plugins:[''],               // 需要使用的的插件列表,如比例尺'AMap.Scale'等
        }).then((AMap)=>{
   
            console.log(AMap,'AMap')
            this.map = new AMap.Map("container111",{
    //设置地图容器id
                // viewMode:"3D",         //是否为3D地图模式
                zoom: 10, //初始化地图级别
                center: [121.487899486,31.24916171 ] //初始化地图中心点位置-重庆市
            });
            var marker1 = new AMap.Marker({
   
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", //在线图标
                position: [121.487899486,31.24916171],
                title:'aaaaaa',
                zoom:999
            });
            var marker2 = new AMap.Marker({
   
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [121.287899486,31.34916171],
                title:'aaaaaa',
                zoom:999
            });
            const content = `<div style="width:auto">EU126,租凭<br/>XX.XX MW</div>`
            marker1.setLabel({
   
                content:content,
                offset:new AMap.Pixel(-20,36)
            })
            marker2.setLabel({
   
                content:content,
                offset:new AMap.Pixel(-20,36)
            })
            var circle = new AMap.Circle({
   
                center: new AMap.LngLat("121.487899486", "31.24916171"), // 圆心位置
                radius: 10000,  //半径
                strokeColor: "#F33",  //线颜色
                strokeOpacity: 1,  //线透明度
                strokeWeight: 3,  //线粗细度
                fillColor: "#ee2200",  //填充颜色
                fillOpacity: 0.35 //填充透明度
            });
            this.map.add([marker1,marker2,circle]);
            // this.map.add(marker);
        }).catch(e=>{
   
            console.log(e);
        })
    }
    render(){
   
        // 1.初始化创建地图容器,div标签作为地图容器,同时为该div指定id属性;
        return (
              <div id="container111" className="map"  > 
              </div>
          );
    }
}
//导出地图组建类
export default MapComponent;

要注意的是:一定要给其设置宽和高,没有高也是显示不出来的。
页面效果为:
在这里插入图片描述

上面的代码实现了两个Marker和一个Circle;
当然这篇只是简单记录一下初次使用,另外献上官方文档连接:
地图 JS API 准备工作
覆盖物的添加和移除
点标记
我们想要实现的基本都能在官方文档上找到对应的效果,主打还是要看人家的官方文档。

目录
相关文章
|
17天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
6天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
19 2
|
16天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
17天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
24天前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
63 3
|
18天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
24天前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
30 0
|
24天前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
45 0
|
24天前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
39 0
|
25天前
|
前端开发 API 开发者
🥇前端宝藏:多项目掌握技能的冒险之旅🏆
在前端开发的学习旅程中,实践是提升技能的关键。本文介绍了多个前端项目,包括计算器、天气应用、经典游戏等,涵盖了从React到Svelte的各种技术栈。每个项目都附有在线演示和源代码,旨在帮助读者深入理解实现细节,激励更多人参与实际项目开发。通过这些项目,读者可以将理论知识转化为实践,拓展职业机会。
14 0
下一篇
无影云桌面