微信小程序webview打开地图组件

这个真是一个非常麻烦的事情。自己折腾了好久，这里记一笔，希望能帮助到别的小伙伴。

直接说结论：

1. 在h5应用中调用微信的sdk，wx.miniProgram.navigateTo 打开另一个小程序页面（比如location），跟上参数，把目标地址的坐标、名称都传递过去。

wx.miniProgram.navigateTo({
  url: `../location/location?latitude=${latitude}&longitude=${longitude}&name=${name}`
});

1. 在新开的location小程序页面中调用wx.openLocation打开导航页。当导航页后退的时候，location页再wx.navigateBack回到之前的h5小程序页中。

// pages/location/location.js

Page({
  data: {
    needBack: false
  },
  
  onLoad: function (options) {
    const {longitude, latitude, name} = options;
    this.openLocation(longitude, latitude, name);
  },
  
  onShow: function() {
    // 从导航页退回的时候，就再次跳转回到之前webview的小程序页面
    if (this.data.needBack) {
      wx.navigateBack();
    }
  },
  
  openLocation: function (longitude, latitude, name) {
    wx.openLocation({
      latitude: Number(latitude),
      longitude: Number(longitude),
      scale: 18,
      name,
      complete: () => {
        this.setData({needBack: true});
      }
    });
  }

});

其他

对于实用主义的朋友，看到这里就OK了，后面扯扯自己绕的一些坑，想了解的可以继续。

应用场景就是h5应用内想导航，或者能够唤起手机内的导航应用。

一开始是用高德的web sdk，能解决一些地图搜索、展示的场景，但也就这样了。在小程序的webview环境里，想拿到用户的实时坐标、以及唤起三方应用都太麻烦了。于是就想，能不能把信息从h5里抛出来。
然后这里就遇上一个大坑，h5和小程序的通信，这里有篇文章，大家想研究的可以参考下：链接

其实主要的问题都在这里捣鼓，一开始没有处理好浏览堆栈，新开页面的情况下openLocation的时候会再新开一个小程序页面。所以就想着能不能直接通信，后来～～～挣扎过、放弃了。最后采用了上面的折中办法，在location页第二次onShow的时候直接退回来，实现了最后的需求。

希望对你能有帮助。