网页内如何调用开放的api接口实现用户定位

网页内调用开放的api接口实现用户定位的步骤如下：以百度地图为例

1、百度直接搜【百度地图调用】，点击出现的第二个网站，进入这个网站即可；

2、进入这个网站后，我们首先得输入自己需要定位的地点。比如我们输入【上海】这个城市，输入后点击【查找】选项；

3、经过上一步的 *** 作，我们已经成功地定位到【上海】这个城市了。然后我们点击第二步【设置地图】；

4、在【设置地图】里面有一些关于这个地图本身显示的一些设置选项，比如可以设置地图的【尺寸大小】，地图的【添加按钮】和地图的【状态】；；

5、然后我们开始给我们的地图添加【地图标注】，点击这个【小棒子】图标，然后在我们需要标注的地方鼠点击一下，输入需要修改的名称和备注，然后点击【保存】按钮；

6、经过上面的一些 *** 作后，我们可以看到我们自己添加的地理位置所显示出的效果了；

7、然后我们点击底部的【获取代码】，再点击【复制代码】即可；

8、在vs2012里面新建一个【html】文件，然后把我们刚刚复制过来的代码直接粘贴到里面。然后在vs2012里面选择使用【谷歌浏览器】查看这个【html】文件里面的内容；；

9、这个是在【谷歌浏览器】里面运行出来的，在本地的百度地图显示出地理位置的效果图。可以看到，我们已经成功地调用了百度地图的API接口了。

api就是接口，html里面的api也不例外，也是些编程接口，是你访问一些编码指令和一些标准的一个接口一个集合，就跟插座一样，是电和电器的一个接口。比如html5里面的canvas，是绘图的一个api，html5获取地理位置的api，即时通信的api，文件读取api等等，通过这些api来访问标准里面的指令编码，来 *** 纵相应的 *** 作。

本文目录：

API接口是什么？

为什么我们需要API接口？

API接口的核心

一、API接口是什么？

我们来以一个常见的数学公式理解API，比如y=x+2，当x=2的时候，y=4，对么？

那此时，我们把y=x+2称为接口，x=2称为参数，y=4称为返回结果，那这个接口的功能就是能把我们输入的数加上2（注意：这里你可以发现接口自身是带有逻辑的）。

类比地，我们来理解一个常见的场景，比如现在有一个可以把经纬度转化为城市的接口，那当我输入经度是55°，纬度是88°的时候，接口通过自己的逻辑运算，返回结果告诉我：杭州市。

这样你就可以清晰地了解百度百科的官方解释了，接口就是预先定义的函数逻辑，他是供其他系统请求，然后返回结果的一个东西。

二、为什么我们需要API接口？

背景：我们的业务系统涉及多方多面，如果要一个公司或者一个系统把所有业务都做完，那未免工作量太大了吧？并且如果其他系统或公司有更好的运算逻辑，那我们在设计功能的时候可以考虑利用接口进行开发。

核心需求：利用现有接口可以降低开发成本，缩短开发成本。

举个例子：比如我是打车的APP，现在我需要在我的页面上展现地图的功能，对于我司而言，新做地图功能未免成本过高，那我们可以在高德开放平台或者百度地图的开放平台，找到地图API，这样的话我们只需要购买高德的服务，部署调用高德地图API，这样就可以快速在我们页面上线地图功能了。

三、API接口的核心

对于小白而言，初看API文档可能是一头雾水的——从哪里看，怎么看，看什么是摆在面前的问题。

其实对于产品经理而言，我们应该更关注这个公司可以提供什么样的API接口服务，比如我知道高德可以提供地图API，规划路线的API，这样的话在我们设计功能和工作中就可以想到调用他们的服务或者参考。

所以产品小白们看不懂也不用过于担心，未来工作中你也会更深入了解清楚，因为看懂并不复杂，以下是API接口的核心点，所有的说明文档离不开这5个核心点。

以下说明均以微信开放平台为例说明，文末有各开放平台的地址，大家有空可以去学习。好了，事不宜迟，现在我们来建立一个场景。

我们现在有一个APP，需要用户在购买的时候调起微信支付的API，完成购买。请各位自动进入这个场景，把自己当作一位产品经理。

1. 接口地址

现在Now，用户点击付款，我们需要告诉微信，我们要调起你们的收银台啦！但，去哪里告诉呢？这就需要接口地址了，也就相当于向微信的这条链接传输指定的数据。

一个链接地址不是我们理解的一个页面，你可以理解是一个电话号码，小白们要改变这个观念。

此时我们可以看到接口文档告诉我们链接是如下这条，那我们现在已经拨通微信的电话了。

2. 请求参数（报文）

我们现在需要告诉微信，你想调用收银台对吧。那我们需要写下来，此时生成的叫做报文，也就是你想告诉这个接口的内容是什么？相当于前文函数的输入x=2。

一般来说，报文的格式和内容都是按接口文档规定的。如下文就是微信开放平台对调起收银台的报文要求。

我们先来看前2个参数，你现在跟微信在对话，是不是应该先告诉微信，你是谁？这里微信的文档告诉你应该要用应用ID+商户号来确定你的身份，什么意思呢？

比如你是A商户，下面有a，b，c三个APP，所以微信要知道你是哪个商家，下面的哪个APP要用收银台。这是非常重要的，微信后面要把收到的钱打到对应的账户以及统计数据等。

那我们就在报文里面写下这两句话：

<appid>wx2421b1c4370ec43b</appid>（我的应用ID是wx2421…….）

<mch_id>10000100</mch_id>（我的商户号是10000…….）

好了，现在微信知道你是谁了，那你要告诉微信，你需要微信支付帮你收多少钱对吧？这里定义了货币类型和总金额，也就是收什么货币，收多少钱。

这里你看，货币类型的必填写了否，也就是说你也可以不告诉微信支付货币类型是什么，因为他在后面备注了默认是人民币。

好的，那我们写下两段报文

<free_type>CNY</ free_type >（我要收人民币）

<total_fee>1</total_fee>（我要收1元）

好了，现在微信知道你是谁，也知道要收多少钱了，那接下来微信支付要把收钱结果告诉你呀，因为你得知道用户是成功支付了才能继续发货，服务啊等等的。所以这里我们用到通知地址，就是告诉微信，等下完事了他去哪里告诉你支付结果。那我们把地址写好：

<notify_url>http://wxpay.wxutil.com/pub_v2/pay/notify.v2.php</notify_url>

3. 返回结果

刚刚微信支付已经去收款了，现在他要在我们留下的通知地址中，告诉我们结果了。结果无非是两种：成功收款？收款不成功？

（1）成功

很顺利，现在用户成功付钱了，并且微信也把成功的消息告诉我们了，并且他还把用户支付的一些信息也告诉我们。

那这里就是微信支付成功收款后告诉我们的信息。

应用APPID，商户号：告诉你我成功扣款的是哪家商户的哪个APPID的交易。

业务结果：成功或失败

（2）失败

在产品设计的时候，我们往往很关注失败的情况，当收款失败的时候，微信同时会告诉你失败的原因，如下图很好理解，失败的原因有很多很多种，我们在设计的时候往往要分析每种失败的原因，为每个失败的原因设计页面和用户提示，以确保用户能理解。

以上就是API接口基本运作模式的理解，下面我将继续更新API接口的一些更为深入和细节的关键元素，如请求方式/签名/加解密等等。

可供参考的开放平台网站

微信支付：https://pay.weixin.qq.com/wiki/doc/api/index.html

高德平台开放平台：https://lbs.amap.com/

---