您的位置首页百科知识

微信小程序map地图组件如何实现添加标记点

微信小程序map地图组件如何实现添加标记点

的有关信息介绍如下:

微信小程序map地图组件如何实现添加标记点

本篇经验将分享 map 地图组件的特殊应用:如何在地图上添加标记点,即打点操作。

该经验基于第一个手工构建的微信小程序,具体构建步骤,可参考如下经验引用。

0微信小程序开发实战--手工开发第一个小程序

先百度搜索查看 map 地图组件的官方文档,本篇经验会使用到的属性包括:latitude(地区区域中心纬度),longitude(地区区域中心纬度),scale(缩放比例),markers(标记点)。

在 wxml 文件中通过 标签创建一个地图组件,通过数据绑定的方式设置其 latitude, longitude, scale, markders 属性的值。

注意:关于数据绑定的更多信息,请参考如下经验引用。

0微信小程序开发实战--WXML数据绑定特性的使用

在小程序 js 文件中定义 wxml 中数据绑定所使用的变量的初始值。注意,其中 markers 属性对应的值为一个数组,即标记点数组,包括标记点的经纬度信息,标记点关联气泡的定义 (callout),标记点关联标签的定义 (label) 等。

在 wxss 文件中声明 wxml 中使用的样式类的定义。

保存编译后,在模拟器中可以看到相关的显示效果,在地图特定位置,有一个标记点,并且其还带有一个气泡信息和标签信息,符合预期。