## 地图  [TOC] ### 1.基本配置 **** **** ### 2.map页面编写 #### map.wxml ``` <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="25" markers="{{markers}}" circles='{{circles}}' bindmarkertap='marker'></map> ``` >1.经纬度 longitude和latitude使用插值表达式{{ }}写入动态数据 2.scale 比例尺 3.markers 为地图添加红色标记，详见map.js > markers 4.circles 为地图添加范围圈，详见map.js > circles 5.bindmarkertap='marker'为markers添加点击事件，使callout出现，详见map.js > callout [map微信官方更多设置](https://developers.weixin.qq.com/miniprogram/dev/component/map.html) [腾讯地图-坐标拾取器](https://lbs.qq.com/tool/getpoint/) **** #### map.wxss ``` page{ height: 100%; } #map{ width: 100%; height: 40%; } ``` **** #### map.js ##### 经纬度设置 ``` Page({ data:{ latitude: 30.591110, longitude: 114.365920, ``` ##### circles ``` circles: [{ latitude: 30.591110, longitude: 114.365920, fillColor: "#12345699", radius:30 }], ``` >设置 纬度、经度、填充颜色、半径 ##### markers ``` markers: [{ iconPath: "/images/地图.png", latitude: 30.591110, longitude: 114.365920, width: 30, height: 30, id:0, title:"爱家国际华城", ``` >设置标记的icon地址、纬度、经度、图标大小 **id、title必须添加，没有id后面的callout气泡无法显示** ##### label（label属性包裹在markers里） ``` label:{ content:"爱家国际华城", color:"#ee5e7b", borderWidth:2, borderColor:"#ee5e7b", borderRadius:5, padding:5, }, >设置标签的内容、字体颜色、边框宽度、边框颜色、边框圆角弧度、文本内容与边框的距离 ``` ##### callout（callout属性包裹在markers里） ``` callout:{ content:"爱家国际华城", color:"#ee5e7b", bgColor:"#fff", borderWidth:2, borderColor:"#ee5e7b", borderRadius:5, padding:5, } }] }, marker(){ } }) ``` >设置内容大致与label相同，可更改bgColor背景颜色 marker（）{}函数调用