请教一下各位，小程序中如何调用高德地图，并且能显示的是高德地图界面呢？
发布于 7 年前 作者 wei61 10939 次浏览 来自 官方Issues

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

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

看了一下高德地图的官网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%;}
1 回复

小程序组件支持腾讯，如果要用高德，可以试试webview

回到顶部