微信小程序-地图map使用，周边公交地铁查询

最新推荐文章于 2024-10-02 22:58:49 发布

蜜汁Ly

最新推荐文章于 2024-10-02 22:58:49 发布

阅读量3.4k

点赞数 3

分类专栏：微信小程序文章标签：小程序map 小程序地图小程序地图周边

本文链接：https://blog.csdn.net/u011360133/article/details/90601705

版权

本文介绍了如何在微信小程序中使用腾讯地图API进行地图集成，并展示了搜索地点和查询周边公交地铁的实现过程，包括引入JavaScriptSDK、设置秘钥及相应的JS、WXML和WXSS代码示例。

摘要由CSDN通过智能技术生成

1、腾讯地图注册，获取秘钥

2、下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

3、小程序引入并使用，下面是搜索地点显示目标地图代码

js代码

// 引入wx-jssdk
import QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js';
var qqmapsdk;

Page({
    data:{
    
    },
    onLoad: function(){
        var _this = this,
            searchName = '海淀黄庄地铁站';
        qqmapsdk = new QQMapWX({
          key: '秘钥'
        });
        qqmapsdk.geocoder({
          address: '北京市' + searchName,
          success: function (res) {
            console.log('suc', res);
            // res.result.location 为地点的经纬度
            var point = res.result.location;
            _this.setData({
              point: point ,
              markers: [{
                iconPath: '/img/location.png',
                id: 0,
                latitude: point.lat,
                longitude: point.lng,
                title: searchName,
                width: 30,
                height: 30,
                callout: {