小程序地图选点

 1,先到腾讯地图申请一个key,然后下载jssdk,到微信公众平台添加“地图选点”插件。直接上代码

<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" show-location></map>
  </view>
</view>
var QQMapWX = require('../../../utils/TX_Map/qqmap-wx-jssdk.js');//引入腾旭地图jssdk
var qqmapsdk;
const app = getApp();

Page({
  data: {
    latitude: 0,//地图初次加载时的纬度坐标
    longitude: 0, //地图初次加载时的经度坐标
    name: "" //选择的位置名称
  },

  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: app.globalData.key//腾讯地图的key
    });
    this.moveToLocation();
  },

  //移动选点
  moveToLocation: function () {
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        app.globalData.lat = res.latitude,
        app.globalData.lng = res.longitude,
        wx.navigateTo({
          url: '../searchStore/searchStore',
        })
        //选择地点之后返回的结果
      },
      fail: function (err) {
        console.log(err)
      }
    });
  },
});

app.json里面上家这俩

  "permission": {
    "scope.userLocation": {
      "desc": "我们将获取你的位置"
    }
  },
  "plugins": {
    "chooseLocation": {
      "version": "1.0.0",
      "provider": "wx76a9a06e5b4e693e"
    }
  },

 

效果图

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 小程序内嵌H5页面使用地图选点的方法如下: 1. 引入地图API:在H5页面的head标签中引入地图API的JavaScript库文件,例如百度地图API、腾讯地图API等。可以通过script标签引入,也可以通过npm安装并使用import语法引入。 2. 创建地图容器:在H5页面的body中创建一个div元素作为地图的容器,指定容器的id或类名。例如:<div id="map"></div> 3. 初始化地图:在H5页面的script标签中,通过API提供的方法初始化地图。一般需要指定地图容器的id、中心点坐标、缩放级别等参数。例如: var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建中心点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点和缩放级别 4. 监听地图选点事件:通过API提供的事件监听方法,监听用户在地图选点的操作。例如: map.addEventListener("click", function(e){ var point = e.point; // 获取用户选取的点的坐标 // 处理选取的点的逻辑,例如将坐标传递给后台进行处理等 }); 以上就是小程序内嵌H5页面使用地图选点的基本步骤。具体的地图API使用方法可以参考各个地图API的官方文档。 ### 回答2: 小程序内嵌H5页面使用地图选点需要以下步骤: 1. 引入地图API:在H5页面的HTML文件中,引入地图API的JavaScript文件,例如使用百度地图API可以在<head>标签中添加<script src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>,需要替换密钥为您申请的百度地图密钥。 2. 创建地图容器:在HTML文件中创建一个div容器作为地图的显示区域,例如<div id="map"></div>。 3. 编写JavaScript代码:在H5页面的JavaScript文件中编写代码实现地图选点的功能。首先,使用地图API提供的方法创建地图对象并将其显示在容器中,例如var map = new BMap.Map("map")。然后,可以添加地图控件,例如放大缩小按钮、比例尺等,以提供更好的交互体验。接下来,可以监听地图的点击事件,当用户在地图上点击时,获取点击的坐标点。最后,将选中的坐标点返回给小程序,例如调用小程序的API将坐标点传回给小程序前端或后端,以便后续处理。 4. 与小程序交互:在H5页面中,可以通过JavaScript的方式与小程序进行交互。例如,可以调用小程序提供的API将选中的坐标点传回给小程序前端页面,以便进行展示或其他操作。 需要注意的是,具体的地图选点功能的实现方法可能因地图API的差异而有所不同。以上提供的步骤是一个基本的流程,根据不同的地图API文档,可以进行相应的调整和修改。 ### 回答3: 小程序内嵌H5使用地图选点,可以通过以下步骤实现: 1. 在H5页面中,首先引入地图API,例如使用百度地图API或腾讯地图API等。可以通过在head标签中添加相应的地图API链接或在script标签中引入地图API的方式进行引入。 2. 在H5页面中添加一个容器来展示地图,可以使用div元素来创建一个具有固定宽度和高度的容器,例如: <div id="map" style="width: 100%; height: 400px;"></div> 3. 在H5页面的JavaScript代码中,通过调用地图API提供的相关方法来初始化地图,并实现地图选点的功能。例如,可以通过以下代码来实现在地图上点击选点的功能: var map = new BMap.Map("map"); // 创建地图实例 var marker; map.addEventListener("click", function(e){ map.clearOverlays(); // 清除之前的标记 var point = new BMap.Point(e.point.lng, e.point.lat); // 获取点击的点坐标 marker = new BMap.Marker(point); // 创建标记 map.addOverlay(marker); // 添加标记到地图上 // 将选中的点返回给小程序 var longitude = point.lng; var latitude = point.lat; // 将经纬度通过回调函数返回给小程序 window.parent.postMessage({ longitude: longitude, latitude: latitude }, "*"); }); 4. 在小程序中,通过WebView组件加载H5页面,并在小程序的JavaScript代码中监听H5页面通过postMessage方法传递的经纬度信息,即可完成小程序内嵌H5地图选点的实现。 上述是一种常见的实现方式,具体还需根据所使用的地图API的不同来调整相应的代码。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值