1.进入百度地图开放平台

百度地图-百万开发者首选的地图服务商,提供专属的行业解决方案

点击上方网址进入百度地图开放地图之后注册或登录已有的账号，点击控制台

点击我的应用。创建一个应用

输入应用名称之后，应用类型选择浏览器端（用于内嵌html页面到鸿蒙项目中）

Referer白名单输入一个 * 即可（意思是所有域名都可以直接访问该应用）

创建应用成功之后，会获得一个项目的访问应用（AK），此处需要复制并记录下来，后面会用到

2.打开VS Code 把下列代码以html页面的格式保存下来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=此处输入刚百度地图开放平台获取的Ak码">
</script>
</head>

<body>
    <button onclick="setcenter()">click</button> 
    <div id="container"></div>
</body>
<script type="text/javascript">
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
     function setcenter() {
         var point = new BMapGL.Point(114.39888464825539, 30.508289282053656);
         map.centerAndZoom(point, 15);
    }
</script>

</html>

button按钮中的方法中的数字为现在所在的经纬度，可以根据自己的情况设置

检查完没有报错之后打开文件所在位置备用

3.打开Dev Eco Studio，新建一个项目

把刚才的html文件复制到rawfile文件夹中，路径为test2/entry/src/resources/rawfile

返回到需要使用地图的页面输入以下代码

import { webview } from '@kit.ArkWeb';

@Component
export struct Home {
  private  webController: WebviewController  = new webview.WebviewController();
  build() {
    Column() {
      Web({ src:$rawfile("01.html"), controller: this.webController,renderMode:RenderMode.ASYNC_RENDER }).javaScriptAccess(true)
        .width('100%')
        .height('100%')
        .onPageEnd(e => {
          console.log('页面加载完成');
        })
    }
    .width('100%')
    .height('100%')
  }
}

4.地图功能在预览器中无法实现，需要打开虚拟机

在设备管理器中选择模拟器打开就可以看到百度地图的默认坐标（天安门广场）

点击click按钮后会定位到刚刚设置经纬度的所在地

# 鸿蒙 # 百度
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

灯光模拟HarmonyOS应用实战-27-两千道生成题为什么正确答案全是B：用稳定置换消除答案位置偏置

avatar HarmonyOS开发者社区

焕新鸿蒙应用权限管理方案，应用授权体验再升级

作为用户或应用开发者，或许经历过类似的体验场景：使用应用的过程中，触发应用某些功能会需要访问你的位置、麦克风、相机等常用权限，若为了保护隐私拒绝授权后，想要使用功能时，再次打开却找不到设置入口；或开启流程繁琐，需要经过频繁跳转和设置。这一问题不仅影响用户体验，还可能造成应用功能不可用、用户流失，也制约着应用的授权转化与留存表现，是行业普遍存在的体验痛点。

avatar HarmonyOS开发者社区

深色模式：ResourceManager 如何选资源及如何手动控制

"深色模式一切全系统跟着变"是 HarmonyOS 的默认行为——ResourceManager 根据系统 colorMode 自动选择 resources/dark/element/color.json 里的深色资源。但很多场景需要"应用内不跟随系统"或"单个页面固定浅色"。本文讲清自动选择的原理，以及如何用 Configuration 手动控制深浅色。

avatar HarmonyOS开发者社区