-
-
-
- 肯定能看懂的jsonp
-
-
- Preview
需要在项目中插入地图、寻路功能的，常用有以下地图插件可选择
--
-
- 谷歌地图 -
- 百度地图 -
- 高德地图 （阿里） -
- 腾讯地图 -总的来说，插入地图功能需要以下步骤： -
- 总结需求，技术选型 -
- 注册相关账号 -
- 申请 API -
- 按官方文档，引入
js，设置容器，插入地图
- - 个性化 -
经过分析，我的项目（KPCV），需要地图、天气功能，所以选择了 高德地图，它提供了地图功能之外的众多扩展功能，如：3天之内天气预报、定位、交通态势等等。
这里，以 高德地图 为例，从0到1简单记录插入地图功能的入门踩的坑，为大家提供参考。
1 申请 API
1.1 注册账号
首先搜索 高德地图开放平台，找到 高德开放平台 http://lbs.amap.com/ ，右上角注册一个账号。
1.2 申请相关 API
申请完账号，会进入到自己的 控制台 ，我们需要先 创建一个新应用：
从左边菜单打开 应用管理 -> 我的应用 ，点击右上角 创建新应用，设置一个名字，选择一个类型，然后在出现的应用框中找到 右上角 添加新Key，可以看到，在新出来的菜单框中 服务平台 中有多个服务平台可选取：
--注意：相关地图库都有
Web端，Android，ios等平台，而在Web端，一般都会分Web开发和Web服务两种API，这两种 API：
Web开发：主要提供围绕地图的功能，如：地图显示、标注、路线规划、公交线路等等
Web服务：主要提供其他附加功能，如：IP定位、地址解析、坐标系转换、天气、地点搜索等等
显而易见，这个菜单框中的 Web端，Web服务这两种 API 我们都需要，我们先给 Web端 创建一个 key：
选择 Web端，自己输入一个名称，要和后面的 Web服务 区分开，以免自己弄混。然后打上下面 我已阅读 高德地图API服务条款 和 高德服务条款及隐私权政策 勾，提交，就可以看到刚才创建的应用框中多出了一个 Key，且标出了它的名称、绑定服务，绑定服务下面是我们刚才选的 Web端，我们也可以点后面查看配额，因为定位、天气等免费的查询次数每天是有限制的，一般情况下也足够用了。
同样操作，创建一个 Web服务 的key，将两个 key复制保存备用。
2 插入地图
2.1 引入 js 文件
我们先插入一个基础的地图试试：
-在 html 文件中引入 js 文件1
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=您申请的key值"></script>
然后用前面复制下来的 Web端 的 key，替换上面链接中 您申请的key值 字符。
---
js文件地址及相关说明可以在这里找到：http://lbs.amap.com/api/javascript-api/summary/#version-introduction
2.2 设置一个容器
1 | <div id="mapContainer"></div> |
根据你的需求，为容器设置合适的宽高
-给容器设置 id，下面初始化时候需要
-2.3 开动 js，创建地图
使用 AMap.Map() 构造函数即可，填进去你的容器id：1
var myMap = new AMap.Map('mapContainer');
召唤出来的地图会自动定位到你当前位置。
-若需要指定地图定位点，使用官方的 坐标拾取器 获取你所要显示的地点的坐标，然后在AMap.Map() 构造函数中补充参数即可：
坐标拾取器：http://lbs.amap.com/console/show/picker，搜索 惟真科技 ，获得坐标 120.163261,30.184492，复制，填到 center 数组属性中 ↓
1 | var myMap = new AMap.Map('mapContainer',{ |
zoom : 地图缩放级别，最大为 20 ，最小为 1，可以根据自己需求设置试试看。
3 插件系统
高德地图在基础的地图图层和覆盖物功能之外提供了众多接口，这里以定位的 AMap.Geolocation 插件 和 天气插件 ‘AMap.Weather’ 为例：
3.1 定位插件
http://lbs.amap.com/api/javascript-api/reference/location
-官网提供了多种加载方式，这里以异步为例：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
29var myMap = new AMap.Map('mapContainer',{
center: [120.163261,30.184492],
resizeEnable: true, // 自动重置地图尺寸
zoom:11, // 设置缩放级别
});
// 接上面
myMap.plugin(['AMap.Geolocation', 'AMap.Weather'], function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
useNative: true, //是否使用安卓定位 sdk 用来进行定位，默认：false
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showMarker: true, //定位成功时是否在定位位置显示一个 Marker
showCircle: true, //定位成功并且有精度信息时，是否用一个圆圈 circle 表示精度范围
});
myMap.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', function (response) {
//定位完成后的回调
console.log(response)
console.log("您位于："+response.addressComponent.province + response.addressComponent.city + response.addressComponent.district + response.addressComponent.township);
});
AMap.event.addListener(geolocation, 'error', function (response) {
//定位出错后的回调
});
});
定位成功后返回的对象中，addressComponent 里面是详细地址，你可以看看返回的所有数据~
3.2 天气插件
天气插件用到了 Web服务 的 key，因此，你需要先复制过来Web服务 的 key
查询天气的 API地址为：
1 | http://restapi.amap.com/v3/weather/weatherInfo?参数&key=“您的key” |
其中， key 是必须的参数，其他参数为选填，一个例子：
1 | $.ajax({ |
返回具体的数据自己可以看看都有哪些，对应数据代表的含义见官方：
http://lbs.amap.com/api/webservice/guide/api/weatherinfo
4 其他服务
除了插件， javascript控件自身也带了许多服务，可以实现相同功能，如道路交叉口查询服务AMap.RoadInfoSearch、天气查询 AMap.Weather：
1 | AMap.service('AMap.Weather', function() { |
文档参见：http://lbs.amap.com/api/javascript-api/reference/search_plugin
-实例：http://lbs.amap.com/api/javascript-api/example/weather-forecast/weather-forecast
-补充
--所有国产地图插件的套路都是一样的：申请账号、申请
-key、引入文件、创建容器、插入地图，以上仅仅是最简单的从 0 到 1 实现一个地图，及相关服务、插件的最简单介绍，尽量降低第一次上手地图插件的难度，更详细的用法、详尽的功能，请自己多试试，多看看官网文档
官网文档地址 http://lbs.amap.com/api/webservice/gettingstarted
-官方所有例子 http://lbs.amap.com/api/javascript-api/example/map/map-show
- -
-