小程序map组件的应用方式：简单版
wxml:
<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" scale="14" show-location> </map>wxss:
page{ width: 100%; height:100%; }#map{ width: 100%; height:100%; }js:
data: { markers: [], //地图参数： latitude: "", //纬度 longitude: "", //经度 }, regionchange(e) { //console.log(e) }, markertap(e) { //console.log(e) }, controltap(e) { //console.log(e) }, //获得地图 getMyMap(e) { let that = this; //自行查询经纬度 http://www.gpsspg.com/maps.htm const mapLatitude = 23.1194300000, mapLongitude = 113.3212200000; wx.getLocation({ type: 'wgs84', success(res){ // 当前自己的经纬度 res.latitude，res.longitude that.setData({ latitude: mapLatitude, longitude: mapLongitude, markers: [{ id: "0", latitude: mapLatitude, longitude: mapLongitude, iconPath: "https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/map-ico.png", width: 40, height: 40, callout: { 'display': 'ALWAYS', 'fontSize': '30rpx', 'content': '广州珠江新城', 'padding': '8rpx', 'boxShadow': '0 0 5rpx #333','borderRadius':'4rpx' } }], }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getMyMap() },源代码可访问本人github: https://github.com/xiexikang/xcx-map
复杂版：微信小程序map组件路线规划，腾讯地图sdk的应用案例
