微信开发-05 LBS应用开发实战-使用高德地图

一.前言

  我相信大家都有这样的经历,出外办事,寻找周边酒店,美食和银行等地点。只有不断询问路人,来不断的修正寻找目标地点。如果身边有一款能够准确搜索周边位置的应用,就会节省我们的时间和精力。

  我开发的公众账号信平的小屋 中有一个“周边搜索”功能,使用户可以搜索自己所在位置手边的POI(Point Of Interest,兴趣点),并且知道哪个POI离自己最近,以及最佳路径规划。

二.高德地图API的使用

   高德地图API的访问地址为 http://lbs.amap.com/api/javascript-api/summary-3/。

微信开发-05 LBS应用开发实战-使用高德地图_第1张图片

  我的APP如何实现定位功能呢?

平台 内容 链接
Android 开发文档 http://lbs.amap.com/api/android-location-sdk/summary/
  Demo及源码 http://lbs.amap.com/api/android-location-sdk/down/
IOS 开发文档 http://lbs.amap.com/api/ios-sdk/guide/location/
  Demo及源码  http://lbs.amap.com/api/ios-sdk/down/
Web  开发文档 http://lbs.amap.com/api/javascript-api/reference/plugin/#/m-amap.geolocation
  Demo及源码  http://lbs.amap.com/api/javascript-api/example/g/0702-2/
Windows 开发文档 http://lbs.amap.com/api/windows-phone-sdk/guide/location/ 
  Demo及源码   http://lbs.amap.com/api/windows-phone-sdk/download/

  备注:iOS系统不允许使用第三方定位,地图SDK的定位方法是对iOS系统定位的二次封装。通过封装。可将原始的定位点无偏差的显示在高德地图上。同时,可自定义定位图标和精度圈的样式。

  本例中使用Web开发平台,使用高德地图首先要申请开发者账号,然后获取Key 。

 应用名称  KEY 绑定服务
 为微信账号申请的应用  d812403e36c2f01eb70d10b8b50e7e96 JavaScript API

1. 第一个例子 创建一个中心点,已天安门为坐标。

 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://webapi.amap.com/maps?v=1.3&key=d812403e36c2f01eb70d10b8b50e7e96">
13         </script>
14         <script type="text/javascript">
15             function initialize(){
16               var position=new AMap.LngLat(116.397428,39.90923); //构建一个LngLat 对象,以(经度,纬度)的顺序传递其参数
17               var mapObj=new AMap.Map("container",{
18               view: new AMap.View2D({//创建地图二维视口
19               center:position,//创建中心点坐标
20               zoom:14, //设置地图缩放级别
21               rotation:0 //设置地图旋转角度
22              }),
23              lang:"zh_cn"//设置地图语言类型,默认:中文简体
24             });//创建地图实例
25             }
26         </script>
27     </head>
28     <body onload="initialize()">
29         <div id="container"></div>
30     </body>
31 </html>

 注意:在第12行,使用了我刚才申请的应用key, 在第16行使用了指定的经纬度,如果读者想试验不同的经纬度,可以使用高德的地图工具 -->坐标拾取器。

http://lbs.amap.com/console/show/picker

 

但遗憾的是高德地图不提供restful api接口,所以高德地图介绍到此为止,无法配合微信公众号使用。

你可能感兴趣的:(微信开发)