微信小程序 实现位置地图显示，引入map地图，不含导航

wxml:

 <view class="mapView" bindtap="mapViewClick" data-name="{{item.name}}" > 
 <i class="fa fa-map-marker" aria-hidden="true"></i> 
 {{item.address}} 
  </view>

js:

/**
* 地图点击
* @param {*} event 
*/
mapViewClick: function(event){
   wx.navigateTo({            
       url: '/pages/venue/venue?name='+event.target.dataset.name,           
   })
}

venue页面：

<cu-custom bgColor="bg-gradual-green" isBack="{{true}}">
  <view slot="backText">返回</view>
  <view slot="content">{{addressName}}</view>
</cu-custom>

<view class='maps'>
  <map
    id="map"
    longitude="{{longt}}"
    latitude="{{lat}}"
    scale="16"
    controls="{{controls}}"
    bindcontroltap="controltap"
    markers="{{markers}}"
    bindmarkertap="markertap"
    polyline="{{polyline}}"
    bindregionchange="regionchange"
    show-location
    show-compass="true"
  ></map>
 
</view>

venue js:

 
Page({
  data: {
    inputFocus: false,
    key:"",
    searchRes:[],
    longt: 123.419902,
    lat: 41.852319,
    markers: [],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 123.324520,
        latitude: 23.21229
      }],
      color: 'red',
      width: 3,
      dottedLine: true
    }]
  },

  /**
   * 页面加载
   * @param {*} options 
   */
  onLoad: function(options){
    if(options.name == "友谊"){
      var arr = [{
        iconPath: '../images/markMapPng.png',
        id: 1,
        latitude: 41.852491,
        longitude: 123.419383,
        width: 30,
        height: 30,
        title: '辽宁宾馆'
    }]
      this.setData({
        markers: arr,
        addressName: '友谊'
      })
    } else{
      var arr = [{
        iconPath: '../images/markMapPng.png',  // 这个是显示位置的图标icon，自己下个图片什么的
        id: 2,
        latitude: 41.734353,
        longitude: 123.505202,
        width: 30,
        height: 30,
        title: '浑南'
    }]
      this.setData({
        markers: arr,
        addressName: '浑南',
        longt:123.505202,
        lat: 41.734353
      })
    }
    
  }
})

wxss:

#searchDiv{
  top: 5px;
  width: 80%;
  margin: 0 10%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #E0E3E4; 
  position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
  height: 50px;
  line-height: 50px;
}
#searchDiv .text{
  margin-left: 20px;
}
#searchDiv .search_input{
  margin-left: 20px;
  /* 使视觉上和text保持一致 */
  margin-top: -50px;
}
#searchDiv .search_icon{
  display: inline-block;
  top: 0;
  position: absolute;
  right: 0px;
}
#searchDiv .search_icon cover-image{
  width: 30px;
  height: 30px;
  padding: 10px;
}
#map{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

点击后显示位置：