鸿蒙花瓣地图 鸿蒙版本需要自己写方法？

欢迎到专业群（ uni-app鸿蒙化技术交流群 ） 咨询，群中有相关专业的管理员和群友。

关于鸿蒙花瓣地图，不需要自己从头写方法，官方已经提供了现成的插件，可以直接使用并绘制轨迹。

鸿蒙花瓣地图是华为鸿蒙系统内置的原生地图服务，目前可以免费使用。在 uni-app 中，通过官方提供的 鸿蒙花瓣地图插件 即可调用，这个插件封装好了地图展示、添加标记点（marker）、绘制折线（polyline）轨迹等功能。

使用步骤：

1. 开通地图服务：登录 华为 AppGallery Connect 后台，选择你的应用，在“项目设置” -> “API 管理”中开启地图服务。

2. 导入插件：在 HBuilderX 中，通过插件市场下载并导入 鸿蒙花瓣地图插件。

3. 使用组件：在你的 Vue 页面中，使用 <embed> 标签引入地图组件，并通过 options 属性配置标记点和轨迹线。

   基本示例代码：

   <template>  
     <embed   
       class="native-map"   
       tag="map"   
       :options='options'   
       @markertap='onMarkerTap'>  
     </embed>  
   </template>  
   
   <script>  
     import "@/uni_modules/native-map";  
     export default {  
       data() {  
         return {  
           options: {  
             latitude: 39.909,  
             longitude: 116.39742,  
             scale: 12,  
             // 绘制轨迹线  
             polyline: [  
               {  
                 points: [  
                   { latitude: 39.909, longitude: 116.39742 },  
                   { latitude: 39.9, longitude: 116.39741 },  
                   { latitude: 39.89, longitude: 116.40741 }  
                 ],  
                 color: 0xff0000ff, // 蓝色  
                 width: 10  
               }  
             ],  
             // 添加标记点  
             markers: [  
               {  
                 latitude: 39.909,  
                 longitude: 116.39742,  
                 iconPath: "/static/location.png"  
               }  
             ]  
           }  
         }  
       },  
       methods: {  
         onMarkerTap(e) {  
           console.log('标记点被点击', e.detail)  
         }  
       }  
     }  
   </script>  
   
   <style>  
     .native-map {  
       width: 100%;  
       height: 300px;  
     }  
   </style>  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

插件能力：

这个插件支持同层渲染，并提供 MapController 让你能在 Vue 页面中调用地图的各种功能，比如动态添加、更新、删除标记点和轨迹线。所以，绘制轨迹、添加气泡显示等功能，都是可以通过配置 options 属性或调用控制器方法来实现的，不需要你写底层的 UTS 代码。

需要注意：

• 请确保你的 HBuilderX 版本 ≥ 4.62，且项目是 Vue3 的 uni-app 工程（非 uni-app x）。
• 如果遇到编译失败等问题，可以先尝试运行一个空白工程，确保基础环境配置正确。

总的来说，你完全可以使用这个插件轻松实现地图展示和轨迹绘制功能。

插插ID 是 native-harmony-map 这样的 导入插件又是import "@/uni_modules/native-map";
export default {
data() {
return {
options: {
latitude: 39.909,
longitude: 116.39742,
scale: 12,
circles: [
{
latitude: 39.909,
longitude: 116.39743,这样的