微信小程序 高德地图

 使用Lin UI 添加搜索框样式

show.wxml

 <view bindtap='onChangeAddress'>
    <l-search-bar placeholder="搜索"
                bg-color="#f6f6f6"
                shape="circle"
                front-text="广州市" value="{{address}}" name="address" placeholder="选择地址"/>
 </view>

show.js

// pages/index/index.js
Page({
    data: {
     address: ''
    },
    onChangeAddress() {
     var _page = this;
     wx.chooseLocation({
      success: (res) => {
       _page.setData({
        address: res.name
       });
      },
      fail: (err) => {
       console.log(err);
      }
     });
    }
   })

map.wxml

<!--pages/map/map.wxml-->
<view class="container">
 <map
  id="myMap"
  style="width: 100%; height: 100%;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  show-location
 ></map>
</view>

map.js

// pages/map/map.js
Page({
    data: {
     latitude: 31.22786,
     longitude: 121.46658,
     markers: [{
      id: 1,
      latitude: 31.22786,
      longitude: 121.46658,
      name: '上海招商局广场'
     }]
    },
    onReady(e) {
     this.mapCtx = wx.createMapContext('myMap')
    }
   })

 效果图