map ，是一个地图组件 .. 先在页面视图文件里面添加一个 map ... 地图有个中心位置，这个位置可以使用 longitude 经度 .. 还有 latitude .. 纬度的值来控制 ..

先添加一个 longitude .. 设置一下地图的经度值 .. 117.0311013 .. 再添加一个 latitude ... 设置一下位置的纬度 .. 36.662447 ... 这个位置是济南的黑虎泉 ..

然后再去设置一下 map 的宽度还有高度 .. 在小程序的样式文件里面 .. 设置一下 map 的样式 .. width 设置成 100vw .. height .. 设置成 100vh ..

scale 属性可以设置地图的缩放级别 .. 它的值最小可以是 5 .. 最大可以是 18 .. 默认它的值是 16 ..

markers

在地图上我们可以添加一些标记 .. 这些标记要放在 markers 里面 .. 添加一个 markers 属性 .. 然后给它绑定一个数据 .. 名字可以是 markers .. 在页面的初始化数据里面 .. 添加一个 markers .. 它是一个数组 .. 里面的项目就是在地图上添加的标记 ..

可以先给 marker 添加一个 id ..

然后再用一个 longitude ，设置一下标记的经度 .. 117.0311013 .. 再用一个 latitude . 设置一下标记的纬度 .. 36.662447 ..

标记还需要一个小图标 .. 添加一个 iconPath 属性 .. 它的值就是小图标的位置 .. /assets/icons/pin.png ..

callout

在标记上面可以显示一个提示文字 .. 这个东西叫 callout .. 在刚才添加的这个 marker 里面，添加一个 callout 属性 .. 它的值是一个对象 .. 里面又包含一些属性 ..

content .. 它的值就是 callout 里的内容 .. 黑虎泉 .. 想让这个 callout 可以在正常的位置上显示的话，我们还需要去设置一下 maker 用的小图标的宽度还有高度 .. 添加一个 width .. 我用的小图标的宽度是 22 .. height，高度是 40 ..

然后继续再设计这个 callout .. 添加一个 fontSize .. 它控制的是 callout 里的文字的大小 .. 大小可以是 14 ... color 可以设置文字的颜色 .. 这里我们设置成黑色 .. #000 .. 再用一个 padding 可以添加点边距 . 大小是 8 .. bgColor 可以设置 callout 的背景颜色 .. 这里用一下白色 #ffffff .. borderRadius .. 是圆角效果 .. 大小是 4 .. 再添加点阴影效果 .. boxShadow .. 4px 8px 16px 0 rgba(0,0,0,0.18)

再到开发者工具的模拟器上预览一下我们设计的这个地图 ...