小程序使用map绘制地图并用wx.openlocation拉起内置地图全流程

在微信小程序中，你可以使用微信 Map 组件和 `wx.openLocation` 方法来展示地图并定位到某个地点。下面是基本的流程：

1. **引入Map组件**:
首先，在项目的 `app.json` 文件中添加 `map` 到支持的 window 类型里，允许地图功能：

   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "Wechat App",
     "navigationBarTextStyle": "black",
     "enablePullDownRefresh": false,
     "map": true,
   }

2. **加载地图并初始化**: 在需要地图的页面的 `wxml` 和 `js` 文件中，创建 map 元素，并初始化它：

   <map class="map" latitude="39.9042" longitude="116.4074" zoom="12"></map>

   Page({
     onLoad: function(options) {
       var map = wx.createSelectorQuery().select('.map').get();
       map.init();
     }
   })

这里的 `latitude` 和 `longitude` 是预设的地图中心位置坐标。

3. **显示自定义位置**:
使用 `wx.openLocation` 引导用户打开地图到指定位置，比如用户当前位置：

   openLocation: function(e) {
     wx.openLocation({
       latitude: e.latitude, // 用户的纬度
       longitude: e.longitude, // 用户的经度
       name: 'Your Place Name', // 地点名称
       infoUrl: 'http://example.com', // 地图详情页链接
       scale: 1, // 缩放级别，范围[1,20]
       success: function(res) {
         console.log('Open location successful');
       },
       fail: function(err) {
         console.error('Open location failed:', err);
       }
     });
   }

当用户点击某个操作时，你可以通过 `e` 对象获取经纬度信息，并调用这个函数。

注意：`openLocation` 功能需要用户授权地理位置权限才能正常使用。