微信小程序：map组件的简单使用，标注callout与label简单用法

效果图

                            

 

wxml

<map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      show-location
      enable-zoom="{{true}}"
    ></map>

 

 

        很常用的一些参数，没什么太大疑问，不过博主在使用时发现了一点十分有趣的事：enable-zoom属性默认为true，在开发工具中竟然没有作用，无法缩放，问题出在本地设置的调试基础库中，博主选择了当前最新版本2.8.0便一切正常了。

                                       

        附：经纬度查询

 

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 34.7681097764,
    longitude: 113.7693285942,
    markers: [{
      id: 1,
      latitude: 34.7681097764,
      longitude: 113.7693285942,

      //气泡label (可与callout 2选1)
      label:{
        content: '金水区绿地原盛国际1号楼A座9楼',  //文本
        color: '#FF0202',  //文本颜色
        borderRadius: 3,  //边框圆角
        borderWidth: 1,  //边框宽度
        borderColor: '#FF0202',  //边框颜色
        bgColor: '#ffffff',  //背景色
        padding: 5,  //文本边缘留白
        textAlign: 'center'  //文本对齐方式。有效值: left, right, center
      },

      //气泡callout
      callout: {
        content: '金水区绿地原盛国际1号楼A座9楼',  //文本
        color: '#FF0202',  //文本颜色
        borderRadius: 3,  //边框圆角
        borderWidth: 1,  //边框宽度
        borderColor: '#FF0202',  //边框颜色
        bgColor: '#ffffff',  //背景色
        padding: 5,  //文本边缘留白
        textAlign: 'center'  //文本对齐方式。有效值: left, right, center
      }
    }],

  },
})

        callout气泡标注需要点击标注点。

        label会直接显示，其有属性anchorX与anchorY为与原点marker的相对坐标。