## map.xxx 該map和前面介紹的地圖一致 [02.地圖](https://www.kancloud.cn/lixu/wechat_mp/790217) ### map.wxml ``` <!--pages/index/index.wxml--> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="25" markers="{{markers}}" circles='{{circles}}' bindmarkertap='marker'></map> ``` ### map.wxss ``` image{ width: 100%; } page{ height: 100%; } #map{ width: 100%; height: 100%; } ``` ### map.js ``` // pages/index/index.js Page({ onLoad(){ wx.showLoading({ title:"加载中..." }) wx.hideLoading(); wx.setNavigationBarTitle({ title:'地图' }); }, data: { latitude: 30.591110, longitude: 114.365920, circles: [{ latitude: 30.591110, longitude: 114.365920, fillColor: "#12345699", radius: 30 }], markers: [{ iconPath: "/images/地图.png", latitude: 30.591110, longitude: 114.365920, width: 30, height: 30, id: 0, title: "爱家国际华城", label: { content: "爱家国际华城", color: "#ee5e7b", borderWidth: 2, borderColor: "#ee5e7b", borderRadius: 5, padding: 5, }, callout: { content: "地址：湖北省武汉市洪山区团结大道1026", color: "#ee5e7b", bgColor: "#fff", borderWidth: 2, borderColor: "#ee5e7b", borderRadius: 5, padding: 5, } }] }, marker() { } }) ```