请教一下各位，小程序中如何调用高德地图，并且能显示的是高德地图界面呢？

微信编辑的模拟器显示是这样的：

手机预览和真机调试的时候看到是这样的：

看了一下高德地图的官网api的介绍实验了一下行不通，但还是显示的是腾讯地图那怎么才能显示的是高德地图呢？谢谢了高德地图中的key属于的是个人开发账号拿到的key

以下是代码：

wxml:

<view class="map_container">   <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"></map>  </view>

js：

var amapFile = require('../../libs/amap-wx.js'); Page({   data: {     markers: [],     latitude: '',     longitude: '',     textData: {}   },   onLoad: function () {     var myAmapFun = new amapFile.AMapWX({key: "xxxxxxxxxxxxxxxxxxx"}); // 这个key我是填写好了的以xxxxxx代替了，不过是个人开发账号的高德地图key     myAmapFun.getRegeo({       // iconPath: "../../img/marker.png",       iconWidth: 22,       iconHeight: 32,       success: (data) => {         console.log(data);         var marker = [{           id: data[0].id,           latitude: data[0].latitude,           longitude: data[0].longitude,           iconPath: data[0].iconPath,           width: data[0].width,           height: data[0].height         }]         this.setData({           markers: marker,           latitude: data[0].latitude,           longitude: data[0].longitude,           textData: {             name: data[0].name,             desc: data[0].desc           }         });       }     })   } })

wxss：

.map_container{position: absolute;top: 0;bottom: 80px;left: 0;right: 0;} .map{width: 100%;height: 100%;}