微信小程序 实现位置地图显示，引入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%;
}

点击后显示位置：