2019-11-26 20:30:26 xiaolinlife 阅读数 49
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

最近项目中要接入百度地图,实现QQ分享和微信分享等功能,然后就想总结一下这些功能实现的流程。那就开始正题吧。
因为项目的框架是cordova+ionic+angular,所以安装的插件都是基于cordova的。

1、百度地图的接入
首先要到百度地图开放平台(http://lbsyun.baidu.com/)去创建应用,然后获取访问应用(AK),创建应用的流程这个大家可以网上查一下。这个AK在安装插件的时候会用到。
百度地图插件为:cordova-plugin-baidumaplocation
安装百度地图的命令行:

cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="<API_KEY_ANDROID>" --variable IOS_KEY="<API_KEY_IOS>"

AK就是<API_KEY_ANDROID>和<API_KEY_IOS>,android和ios的AK是分别申请的。

2、QQ分享的接入
首先要到QQ互联平台(https://connect.qq.com/index.html)创建应用,获取APPID,APPID在项目中安装插件的时候会用到。
QQ分享的插件为:cordova-plugin-qqsdk
安装QQ分享的命令行:

cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=APPID

APPID就是创建应用时申请下来的APPID

3、微信分享的接入
首先要到微信开放平台上(https://open.weixin.qq.com/)创建应用,获取APPID,APPID在项目中安装插件的时候会用到。
微信分享的插件为:cordova-plugin-wechat
安装微信分享的命令行:

cordova plugin add cordova-plugin-wechat --variable wechatappid=APPID

APPID就是创建应用时申请下来的APPID

上面的百度地图开放平台、QQ互联平台、微信开放平台都需要先申请账号,有了账号之后才能创建应用。账号的申请需要的材料不少,大家可以去查一下。
先到这吧,以后有什么新的插件,我再补充,现在flutter开始火起来了,前端又要变革了。

2019-01-23 11:03:42 michael_f2008 阅读数 2771
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

先上截图:

截图
截图
截图
截图

小程序二维码:

小程序二维码

完整代码:GItHub项目地址
https://github.com/MichaelLee826/weather_forecast

一、申请百度地图的AK

百度地图开放平台上注册账号并登录,然后在“控制台”中创建一个应用。
创建应用
选择“微信小程序”,并填入创建小程序时得到的APP ID。
选择微信小程序
提交后就可以在前一个页面中看到新创建的应用的AK了。

二、下载SDK

在“开发文档”中点击“微信小程序JavaScript API”
下载SDK
在“相关下载”中点击“全部下载”。
下载API
压缩包里主要包括两个文件夹:demosrc,开发时主要用到src里的js文件:bmap-wx.js(为讲解方便,本文不使用.min)。

三、配置服务器域名

登录微信小程序管理后台,进入开发——开发设置
开发设置
服务器域名中,填入request合法域名https://api.map.baidu.com
配置服务器域名

PS:微信要求域名都为https,所以有些API为http的就不能用了。

四、写代码

打开微信开发者工具,并新建一个小程序项目,会自动生成一些文件(新建项目的方法、各文件的作用,网上有很多教程,不再赘述)。

1、打开index.js文件,添加对bmap-wx.js文件的引用:

//index.js
//获取应用实例
const app = getApp()
//调用百度地图天气API的js文件
var bmap = require('../../utils/bmap-wx.js'); 

2、在onLoad方法中,新建一个BMapWX对象,并填入AK:

var BMap = new bmap.BMapWX({
	ak: '你申请的百度地图AK'
});

3、在onLoad方法中,发起查询天气的请求:

BMap.weather({
	fail: fail,
	success: success
});

4、在onLoad方法中,定义查询成功和失败的方法:

var fail = function(data) {
	console.log('查询失败')
};
var success = function(data) {
	console.log('查询成功');
	var currentWeather = data;
	this.setData({
		currentWeather: currentWeather
	});
}

注意,setData中的currentWeather要与Page中的data部分对应:

data: {
        currentWeather: ''
    },

至此,就可以获得返回的天气数据了,剩下的工作就是解析返回的数据。

五、解析数据

在第三步中,查询成功获得的返回数据data包括了我们需要展示的信息,因此解析的工作也主要是针对data

data主要包括两部分内容:currentWeatheroriginalData
data
1、解析data.currentWeather
结构如下:
data.currentWeather
解析方式如下:

var currentWeather = data.currentWeather[0];
	//currentWeather.currentCity:"济南市"
	//currentWeather.date:"周四 01月17日 (实时:3℃)"
	//currentWeather.pm25:"85"
	//currentWeather.temperature:"7 ~ -2℃"
	//currentWeather.weatherDesc:"晴"
	//currentWeather.wind:"南风微风"

注意,data.currentWeather是一个JSON数组,关键的数据都存在data.currentWeather[0]

2、解析data.originalData
结构如下:
data.originalData
data.originalData也是JSON格式,我们关心的数据存在data.originalData.results数组中,结构如下:
data.originalData.results
可以看出,data.originalData.results[0]数组中关键的部分也是两块:index数组和weather_data数组:
data.originalData.results[0].index
data.originalData.results[0].index[0]是穿衣的相关信息
data.originalData.results[0].index[1]是洗车的相关信息
data.originalData.results[0].index[2]是感冒的相关信息
data.originalData.results[0].index[3]是运动的相关信息
data.originalData.results[0].index[4]是紫外线强度的相关信息
data.originalData.results[0].weather_data
data.originalData.results[0].weather_data[0]是今天的天气情况
data.originalData.results[0].weather_data[1]是明天的天气情况
data.originalData.results[0].weather_data[2]是后天的天气情况
data.originalData.results[0].weather_data[3]是大后天的天气情况

至此,就完成了数据解析工作,通过setData可以将数据与index.wxml中的变量绑定。修改success如下:

var success = function(data) {
	console.log('查询成功');
	//实时天气
	var currentWeather = data.currentWeather[0];
	//感冒信息
	var flu = data.originalData.results[0].index[2];
	//未来三天的天气
	var forecast = new Array(3);
	for (var i = 0; i < 3; i++) {
		forecast[i] = data.originalData.results[0].weather_data[i + 1];
	}
	//配置数据
	this.setData({
		currentWeather: currentWeather,
		flu: flu,
		forecast: forecast
	});
}


index.wxml文件中调用:

<!--当前定位的城市-->
<view class='cityName'>{{currentWeather.currentCity}}</view>

<!--未来3天的天气情况,包括日期、天气描述、温度范围、风力-->
  <view class='forecast'>
    <view class='next-day' wx:key="{{index}}" wx:for="{{forecast}}"> 
      <view class='detail date'>{{item.date}}</view>
      <view class='detail'>{{item.weather}}</view>
      <view class='detail'>{{item.temperature}}</view>
      <view class='detail'>{{item.wind}}</view>
    </view>
  </view>
  
<!--感冒信息-->
<view class='tips'>   
	<view class='index'>感冒指数:{{flu.zs}}</view>
	<view class='description'>{{flu.des}}</view>
</view>

六、bmap-wx.js简单介绍

打开bmap-wx.js文件,可以看到只有一个类BMapWX。该类包含了四个方法,而我们需要用到的是weather(param)方法:

/**
* 天气检索
*
* @param {Object} param 检索配置
*/
weather(param) {
	var that = this;
	param = param || {};
	let weatherparam = {
		coord_type: param["coord_type"] || 'gcj02',
        output: param["output"] || 'json',
        ak: that.ak,
        sn: param["sn"] || '',
        timestamp: param["timestamp"] || ''
	};
	let otherparam = {
		success: param["success"] || function () {},
		fail: param["fail"] || function () {}
	};
	let type = 'gcj02';
	let locationsuccess = function (result) {
		weatherparam["location"] = result["longitude"] + ',' + result["latitude"];
		wx.request({
			url: 'https://api.map.baidu.com/telematics/v3/weather',
			data: weatherparam,
			header: {"content-type": "application/json"},
			method: 'GET',
			success(data) {
				let res = data["data"];
				if (res["error"] === 0 && res["status"] === 'success') {
					let weatherArr = res["results"];
					// outputRes 包含两个对象,
					// originalData为百度接口返回的原始数据
					// wxMarkerData为小程序规范的marker格式
					let outputRes = {};
					outputRes["originalData"] = res;
					outputRes["currentWeather"] = [];    
					outputRes["currentWeather"][0] = {
			 			currentCity: weatherArr[0]["currentCity"],
						pm25: weatherArr[0]["pm25"],
						date: weatherArr[0]["weather_data"][0]["date"],
						temperature: weatherArr[0]["weather_data"][0]["temperature"],
						weatherDesc: weatherArr[0]["weather_data"][0]["weather"],
						wind: weatherArr[0]["weather_data"][0]["wind"]
					};
					otherparam.success(outputRes);
				} else {
					otherparam.fail({
						errMsg: res["message"],
						statusCode: res["status"]
					});
				}
			},
			fail(data) {
				otherparam.fail(data);
			}
		});
	}
	let locationfail = function (result) {
		otherparam.fail(result);
	}
	let locationcomplete = function (result) {
	}
	if (!param["location"]) {
		that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
	} else {
		let longitude = param.location.split(',')[0];
		let latitude = param.location.split(',')[1];
		let errMsg = 'input location';
		let res = {
			errMsg: errMsg,
			latitude: latitude,
			longitude: longitude
		};
		locationsuccess(res);
	}
}

可以看出,成功返回的数据为data,通过解析,封装成了我们在前面得到的data.currentWeatherdata.originalData两个数组。

另外,程序中默认查询的城市是当前定位的城市,依据的参数是经纬度坐标。

weatherparam["location"] = result["longitude"] + ',' + result["latitude"];

如果想查询其它城市,例如北京,可以修改为:

weatherparam["location"] = param["北京"];

其中param就是weather()函数的参数。

2018-06-25 01:18:44 m13302979400 阅读数 1761
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

使用步骤:

1.注册百度地图api账号,获取应用AK

2.环境配置:获取微信小程序appID密钥和百度AK

3.创建本地小程序项目

① 打开微信小程序开发者工具并使用微信确认登录。

② 点击 "+" 按钮,添加项目。

③ 点击 "添加项目" 按钮,项目创建完成。

注意:需勾选"在当前目录中创建quick start项目"。

4.下载百度地图微信小程序JavaScript API,解压后将bmap-xw.js文件引入到微信小程序目录libs文件中

5.打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码

在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.search方法进行POI检索。

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js'); 
var wxMarkerData = []; 
Page({ 
    data: { 
        markers: [], 
        latitude: '', 
        longitude: '', 
        placeData: {} 
    }, 
    makertap: function(e) { 
        var that = this; 
        var id = e.markerId; 
        that.showSearchInfo(wxMarkerData, id); 
        that.changeMarkerColor(wxMarkerData, id); 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
       // 发起POI检索请求 
        BMap.search({ 
            "query": '酒店', 
            fail: fail, 
            success: success, 
            // 此处需要在相应路径放置图片文件 
            iconPath: '../../img/marker_red.png', 
            // 此处需要在相应路径放置图片文件 
            iconTapPath: '../../img/marker_red.png' 
        }); 
    }, 
    showSearchInfo: function(data, i) { 
        var that = this; 
        that.setData({ 
            placeData: { 
                title: '名称:' + data[i].title + '\n', 
                address: '地址:' + data[i].address + '\n', 
                telephone: '电话:' + data[i].telephone 
            } 
        }); 
    }, 
    changeMarkerColor: function(data, i) { 
        var that = this; 
        var markers = []; 
        for (var j = 0; j < data.length; j++) { 
            if (j == i) { 
                // 此处需要在相应路径放置图片文件 
                data[j].iconPath = "../../img/marker_yellow.png"; 
            } else { 
                // 此处需要在相应路径放置图片文件 
                data[j].iconPath = "../../img/marker_red.png"; 
            } 
            markers[j](data[j]); 
        } 
        that.setData({ 
            markers: markers 
        }); 
    } 
})

6.为能够正常展示地图和检索结果,请打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码

<view class="map_container"> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="place_info"> 
  <text>{{placeData.title}}</text> 
  <text>{{placeData.address}}</text> 
  <text>{{placeData.telephone}}</text> 
</view> 

7.拷贝样式代码到 pages/index/index.wxss文件

.map_container{ 
    height: 300px; 
    width: 100%; 
} 

.map { 
    height: 100%; 
    width: 100%; 
} 

2016-12-14 13:45:46 csnewdn 阅读数 540
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

微信开发之百度地图API学习(一)

在接下来的微信开发中打算针对百度地图做一些开发,因此接下来机票博客就是关于如何把百度地图应用到微信里边,而今天也是我第一次了解这个API,下面分享给大家。

       百度地图的使用是建立在html和js基础上的,下面是一个入门级实例

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  6. <title>Hello, World</title>    
  7. <style type="text/css">    
  8. html{height:100%}    
  9. body{height:100%;margin:0px;padding:0px}    
  10. #container{height:100%}    
  11. </style>    
  12. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"></script>//此为v1.5版本的引用方式    
  13.   // http://api.map.baidu.com/api?v=1.5&key=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式    
  14. </head>    
  15.      
  16. <body>    
  17. <div id="container"></div>   
  18. <script type="text/javascript">   
  19. var map = new BMap.Map("container");          // 创建地图实例    
  20. var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    
  21. map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别    
  22. </script>    
  23. </body>    
  24. </html>    
为了更好的兼容我们这里使用的html5这个实例是以天安门为中心的全屏地图,接下来便是详细解释,

        这一句是为了地图可以更好的在移动平台上展示

  1. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
        为了使浏览器充满整个屏幕  

  1. <style type="text/css">    
  2.  html{height:100%}      
  3.  body{height:100%;margin:0px;padding:0px}      
  4.  #container{height:100%}      
  5.  </style>    

    百度地图v1.5及以后的版本将需要申请apikey,不知道是不是因为百度服务器的原因最近很多人的ak不能用,我的同样如此,所以这里用了1.4版本,可以不用申请ak了

  1. <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>   

创建地图容器元素

地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。

命名空间

API使用BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、BMap.Overlay。

创建地图实例

  1. var map = new BMap.Map("container");  

位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标

  1. map.centerAndZoom(point, 15);   

在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。

地图配置与操作

地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验,但是如果您希望在地图中使用鼠标滚轮控制缩放,则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考的配置方法一节中找到。

此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、panTo()、zoomTo()等等。

下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。

  1. var map = new BMap.Map("container");      
  2.  var point = new BMap.Point(116.404, 39.915);      
  3.  map.centerAndZoom(point, 15);      
  4.  window.setTimeout(function(){      
  5.   map.panTo(new BMap.Point(116.409, 39.918));      
  6.  }, 2000);   
 
2017-08-04 17:37:00 txqd1989 阅读数 29527
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

作者:花罚,来自原文地址 

原理

当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。

步骤

1. 创建地图容器

微信小程序创建地图容器相对来说比较简单,只需要一个map组件即可,下面代码将完成地图容器的创建: 
- wxml代码

<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"></map>
  • 1
  • 2
  • 1
  • 2
  • map组件简介

    map组件默认使用腾讯地图,只要在wxml中书写标签即可展示一个简易的地图容器,但是这个地图太过于简单,也没有什么可操作性,因此该标签还提供了一些特殊属性方便用户可以任意的操作和位置该组件,下面介绍几个常用的属性。

    • longitude & latitude 这两个属性一般都是成对出现,用于初始化地图中心位置
    • scale 该属性表示地图的缩放级别,数字越大比例尺越小。根据文档上说默认值为:16

2. 地图容器全屏

上面的代码已经可以正常的创建地图容器了,但是所创建的地图大小不够,所以我们需要给map组件配上style属性,style属性是wxml中几乎所有组件均支持的属性,主要用于给主键配置显示效果。以下地图全屏代码同时适用于wxml的其他组件: 
- 在map组件上加上style

<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"
 style="width: 100%; height: {{height}}px;"></map>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 在js中动态绑定style的高 
    对于组件的宽度全屏我们可以使用100%进行确定,但是高度全屏100%却不能起到任何效果,对此可以使用小程序的一个接口wx.getSystemInfo进行获取系统的高度,然后再动态绑定到map组件上。js代码如下:
//index.js
var app = getApp()
Page({
    data: {
        height: 'auto'
    },
    onLoad: function () {
        //保证wx.getSystemInfo的回调函数中能够使用this
        var that = this

        //调用wx.getSystemInfo接口,然后动态绑定组件高度
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    height: res.windowHeight
                })
            }
        })

    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

3. 引入百度地图小程序api

  • 下载bmap-wx.js
  • 解压后将bmap-wx.js放入小程序工程里面,我这里是创建一个叫utils的文件夹用于保存这些第三方的工具。
  • 在js中使用var bmap = require('../../utils/bmap-wx.js')引入api

注:在开始使用该api之前,我们还需要去百度地图上获取一个微信小程序专用的key,在获取这个key的时候需要输入目标小程序的appid。

4. 使用api获取周边信息

BMap.search接口是用于获取周边信息的接口,官方描述为:查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。

首先,我们来看一个BMap.search的使用案例:

//index.js
var app = getApp()
//引入百度地图api
var bmap = require('../../utils/bmap-wx.js')
//用于保存BMap.search接口返回的数据
var wxMarkerData = []
Page({
    data: {
        height: 'auto',
        markers: [], 
        latitude: '', 
        longitude: ''
    },
    onLoad: function () {
        //保证wx.getSystemInfo的回调函数中能够使用this
        var that = this

        //构造百度地图api实例
        BMap = new bmap.BMapWX({ 
            ak: '***************' 
        })

        //调用wx.getSystemInfo接口,然后动态绑定组件高度
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    height: res.windowHeight
                })
            }
        })
    },
    //查询当前位置的poi信息
    //官方文档上说可以查询指定位置的周边信息
    //然而当前源码中却存在一个bug导致不能查询指定位置的周边信息
    search:function(e){

        var that = this

        //查询失败,直接打印log
        var fail = function(data) { 
            console.log(data) 
        }

        //查询成功后将结果数据动态绑定到页面上
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            })
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            })
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            })
        }

        //使用百度api查询周边信息
        //其中使用到了dataset属性
        BMap.search({
            query: e.target.dataset.type, 
            success: success,
            fail: fail 
        })
    }

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

从上面代码中可以看出我们为了使用该接口,在页面数据中加入了三个数据:latitude、longitude和markers,分别用于保存当前poi位置和周边信息的标记。还有看到我们在在page外申明了两个变量,bmap和wxMarkerData, 分别保存当前页面的api入口,poi接口返回数据。由于页面增加数据了,所以对应的页面也需要做出相应的变化,需要对map组件进行简单的修改:

<!--index.wxml-->
<view style="width: 100%; height: {{height}}px;">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" 
    markers="{{markers}}"  style="width: 100%; height: {{height-30}}px;"></map>
    <view class="nav">
        <button bindtap="search" data-type='酒店' class="nav-but">酒店</button>
        <button bindtap="search" data-type='美食' class="nav-but">美食</button>
        <button bindtap="search" data-type='书店' class="nav-but">书店</button>
        <button bindtap="search" data-type='商场' class="nav-but">商场</button>
    </view>
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

同时添加了两个简单的wxss,这个wxss是给地图脚下增加的一个简单的导航样式

/**index.wxss**/
.nav{
  position: fixed;
  z-index: 10000;
  bottom: 0px;
  width: 100%;
  height: 30px;
}
.nav-but{
  border: cadetblue 1px solid;
  border-radius: 0px;
  width: 25%;
  text-align: center;  
  line-height: 30px;
  display: inline-flex;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

以上就完成了一个简单的地图周边组件,优化一下显示效果就差不多可以用了。当前还有一个问题就是百度api的bug问题,该bug如果不进行修复,那么将一直只能查询当前地址的周边信息,另外我查看了高德地图的poi周边接口,该接口就直接不提供指定位置的周边信息查询。

微信开发

阅读数 913

没有更多推荐了,返回首页