微信小程序map地图

<style lang="less">
  @import "../../assets/styles/base";
  @import "../../assets/styles/px";
  @import "../../assets/styles/icons";
  page {
    background-color: #F8F8F8;
    height: 100%;
    font-size: 32rpx;
    line-height: 1.6;
  }

  .page-body {
    padding: 20rpx 0;
  }

  .btn-area{
    margin-top: 60rpx;
    box-sizing: border-box;
    width: 100%;
    padding: 0 30rpx;
  }
  .page-section-gap{
    box-sizing: border-box;
    padding: 0 30rpx;
  }

  .page-body-button {
    margin-bottom: 30rpx;
  }
</style>
<template>
  <view class="page-body">
    <map id="map"
         longitude="{{poi.longitude}}"
         latitude="{{poi.latitude}}"
         markers="{{markers}}"
         scale="16"  style="width: 100%; height: 300rpx;" bindtap="click">
    </map>
    <!--form表单-->
    <form bindsubmit="click">
      <!--地址描述输入框,示例：北京市海淀区彩和坊路海淀西大街74号-->
      <input style="border:1px solid #000;" name="geocoder"></input>
      <!--提交表单数据-->
      <button form-type="submit">地址解析</button>
    </form>
    <!--地址描述经纬度展示-->
    <view>地址纬度：{{poi.latitude}}</view>
    <view>地址经度：{{poi.longitude}}</view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import Base from '@/pages/base'
  import {connect} from 'wepy-redux'
  import {jumpPage} from '@/util'
  // import {QQMapWX} from '@/services/qqmap-wx-jssdk'

  @connect({
    userInfo({index}) {
      return index
    }
  })

  export default class Map extends Base {
    config = {
      navigationBarTitleText: '地图导航',
      navigationBarBackgroundColor: '#4592FD',
      navigationBarTextStyle: 'white'
    }
    components = {}
    data = {
      // 要去的地址经纬度
      poi: {
        longitude: 117.2805976868,
        latitude: 31.8269611659
      },
      // 当前经纬度
      pois: {
        longitude: 117.2805976868,
        latitude: 33.8269611659
      }

    }
    async onLoad(option) {
      let qqmapsdk = new QQMapWX({
        key: 'PULBZ-ZG2C5-YVJI4-QFNNM-TAEQQ-2CF3V' // 必填
      })
      this.mapCtx = wx.createMapContext('myMap')
      this.$apply()
    }
    async loadData() {}
    computed = {}
    methods = {
      click: function (e) {
        console.log(1111)
        let vm = this
        wx.openLocation({
          latitude: vm.pois.latitude,
          longitude: vm.pois.longitude,
          scale: 18,
          name: '华乾大厦',
          address:'金平区长平路93号'
        })
      }
    }
    mixins = []
    events = {}
  }
</script>