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

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: {content: searchName,color: '#333',fontSize: 14,padding: 8,display: 'ALWAYS',textAlign: 'center'}}]})},fail: function (res) {console.log('fail', res);},complete: function (res) {console.log('complete', res);}})},
})

wxml代码

<!-- longitude 中心经度latitude 中心纬度markers 标记点enable-zoom 缩放enable-scroll 拖动 -->
<mapid="map"longitude="{{point.lng}}"latitude="{{point.lat}}"scale="13"markers="{{markers}}"enable-zoom="{{false}}"enable-scroll="{{true}}"style="width: 100%; height: 500rpx;">
</map>

4、搜索周边

js代码

// 引入wx-jssdk
import QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js';
var qqmapsdk;Page({data:{aroundType: [{ text: "公交" }, { text: "医院" }, { text: "商场" }, { text: "学校" }, { text: "银行" }, { text: "美食" }],currentInd: -1},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;var marker = {iconPath: '/img/location.png',id: 0,latitude: point.lat,longitude: point.lng,title: searchName,width: 30,height: 30,callout: {content: searchName,color: '#333',fontSize: 14,padding: 8,display: 'ALWAYS',textAlign: 'center'}}_this.setData({point: point ,markers: [marker],locMarker: marker})},fail: function (res) {console.log('fail', res);},complete: function (res) {console.log('complete', res);}})},getKeyword(e): {var index = e.currentTarget.dataset.index;this.setData({currentInd: index})this.getAround(this.data.aroundType[index].text);},getAround( keyword ){var _this = this,location = _this.data.point.lat + ',' + _this.data.point.lng;// 搜索周边方法qqmapsdk.search({keyword: keyword,location: location,success: function(res) {console.log(res);var markers = [], num = 1;markers.push(_this.data.locMarker);for (var o of res.data){markers.push({iconPath: '/img/location.png',id: num++,latitude: o.location.lat,longitude: o.location.lng,title: o.title,width: 30,height: 30,callout: {content: o.title,color: '#333',fontSize: 14,padding: 8,display: 'BYCLICK',textAlign: 'center'}})}},fail: function(){}})}
})

wxml代码

<mapid="map"longitude="{{point.lng}}"latitude="{{point.lat}}"scale="15"markers="{{markers}}"
></map><view class="catalog"><block wx:for="{{aroundType}}" wx:key=""><view bindtap="getType" data-index="{{index}}" class="item {{currentInd==index?'active':''}}">{{item.text}}</view></block>
</view>

wxss代码

map{width: 100%;height: calc( 100vh - 90rpx);
}.catalog{position: fixed;bottom: 0;left: 0;width: 100%;height: 90rpx;background: #000;
}
.catalog .item{float: left;width: 16.6666%;color: #fff;text-align: center;font-size: 30rpx;line-height: 90rpx;
}
.catalog .item.active{background: #de3435;
}

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

php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
uniapp 微信小程序地图map组件样式自定义
1.第一步进入微信小程序JavaScript SDK | 腾讯位置服务 2. 进入应用管理 > 我的应用 > 右上角创建应用 3.创建完应用,进入下面的个性化地图 > 样式选择 ...
微信小程序地图map组件 SDK 并实现导航
说明本文使用uniapp使用map组件作为示例效果预览主要实现: 地图上搜索关键字地址对地址设置标记点位置授权被拒后,重新触发授权的处理逻辑实现获取当前位置,计算目标地址与当前位置的距离 ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...

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

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

最新文章

热门文章