微信小程序-引入地图、获得经纬度-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序-引入地图、获得经纬度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实际这是一个获得经纬度的方法，但是有了经纬度可以做很多事情

点击按钮跳转到一个单独的页面（地图，可导航）
在页面内嵌一个独立的小区域

首先可看一下腾讯地图官方文档

微信小程序JavaScript SDK | 腾讯位置服务

最基本：先引入js，获得key，

js文件：https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

获得key：微信小程序使用腾讯地图完整流程_时光机上敲代码的博客-CSDN博客_小程序腾讯地图

准备工作完成之后就可以按照腾讯地图的文档来写代码了

引入js，填写key

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});

可以写在事件里面，我这里是直接写在onLoad里面

data:{
        // 经度
        longitude: '',
        // 维度
        latitude: '',
        markers: [], 
    
        }

注意：在文档的js中有这样一段代码

微信小程序-引入地图、获得经纬度

效果微信小程序-引入地图、获得经纬度

以上完成最基本的--获得经纬度，

1、点击按钮跳转到一个单独的页面（地图，可导航）

//跳转到地图
    go_map() {
        wx.openLocation({
            // 经纬度
            latitude: this.data.poi.latitude,
            longitude: this.data.poi.longitude,
            // 地址名
            name: this.data.datalist.address,
            address: this.data.datalist.address
        })
    },

2、在页面内嵌一个独立的小区域

 <map class="bottom_map" circles="false" id="myMap" 
    markers="{{markers}}" style="width:100%;height:300rpx;" 
    longitude="{{poi.longitude}}" latitude="{{poi.latitude}}" 
    scale='17' show-location>
 </map>
//  scale='17' 	缩放级别，取值范围为3-20

详细属性信息：map | 微信开放文档文章来源地址https://www.toymoban.com/news/detail-495200.html

到了这里，关于微信小程序-引入地图、获得经纬度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！