angular 4 与高德地图的结合
最近有用angular 4、项目中要用到高德地图,于是研究了一番,现在分享给大家。
PS:以大漠老师的NiceFish(地址:http://git.oschina.net/mumu-osc/NiceFish)为例给大家一步一步分享展示!
1、在大漠老师的码云上将代码Down下来后,安装node_modules,建议走cnpm install,毕竟是国内的项目所以
完全没问题(PS:npm install 慢的吐血)。
2、去高德地图开放平台申请自己的key。
3、用编译器(鄙人用的VS Code)打开(迫不及待了)。
4、做准备工作:
①、打开index.html里面的标签图(如图1所示),将自己申请的key填写上去
图 1
②、将AmapComponent里面注释掉的代码打开
图 2
③、将AmapComponent里面注释掉的代码打开后发现结果并不如人意——如图 2 所示红色矩形里面的代码AMap类会报错
(如图 3 所示),那怎么办呢?别急,听细细道来。
图 3
1)、作为初学者,一开始肯定是无从下手 && 疯狂百度 || StackOverFlow。
2)、大家细细想一下、一般的仓库(无论是码云还是Github)都会有issue,那么有头绪了
看看issue里面是怎么说的。果然在issue的第二页里面有人提到了这个问题,如图 4 所示:
图 4
3)、细看里面的评论,发现在评论里面有前人给出了答案(如图 5 所示)——declare var AMap:any;
图 5
4)、是不是感觉抓到了救命稻草。^_^
5)、编译完美通过——带着扑通扑通的小心脏打开http://localhost:4200界面(还是那熟悉的界面,还是那熟悉的芬芳),点击高德地图、见证奇迹的时候到了
如图 6 所示:
图 6
6)、地图已经映入眼帘——简直完美!
7)、这肯定不是我们需要的呀,怎么做定制开发了——这正是本文的中点。
5、怎么做定制界面前提概述:
1)、在做界面前你必须的懂一点怎么用高德地图的API吧,不会没关系:
在优酷上面有鬼谣前辈的视频公开课
(URL:http://v.youku.com/v_show/id_XODM5MjIwNzA0.html?spm=a2h0k.8191407.0.0&from=s1.8-1-1.2)
——尽你所想,尽你所学!
2)、高德开放平台地址:http://lbs.amap.com/faq/top/hot-questions => 点击web服务
下面的JavaScript API。你就可以在里面自由翱翔啦!
(鄙人的学习心路历程是:先在纯的html里面实现后在再搬到angular里面)。
3)、注意:开始真正的Codeing啦;
6、开发阶段
1)、实例化一个地图对象
//地图加载
var map
=
new
AMap.
Map(
"gaodemap-container", {
resizeEnable:
true
});
2)、设置城市中心(调用setCity()函数)
//设定您想要的目标城市Xxx
map.
setCity(
"重庆");//如:重庆
3)、加载工具条(ToolBar)
//自定义Marker
var customMarker
=
new
AMap.
Marker({
offset:
new
AMap.
Pixel(
-
14,
-
34),
//相对于基点的位置
icon:
new
AMap.
Icon({
//复杂图标
size:
new
AMap.
Size(
27,
36),
//图标大小
image:
"http://webapi.amap.com/images/custom_a_j.png",
//大图地址
imageOffset:
new
AMap.
Pixel(
-
28,
0)
//相对于大图的取图位置
})
});
//加载地图工具条
map.
plugin([
"AMap.ToolBar"],
function () {
var toolBar
=
new
AMap.
ToolBar({ locationMarker: customMarker });
map.
addControl(toolBar);
});
4)、加载比例尺
map.
plugin([
"AMap.Scale"],
function () {
var scale
=
new
AMap.
Scale();
map.
addControl(scale);
});
5)、加载地图实景(含路况)
map.
plugin([
"AMap.MapType"],
function () {
var type
=
new
AMap.
MapType();
map.
addControl(type);
});
6)、加载鹰眼
//加载地图鹰眼
map.
plugin([
"AMap.OverView"],
function () {
var view
=
new
AMap.
OverView();
view.
open();
map.
addControl(view);
});
7)、做一个自定义的搜索功能
//构造地点查询类
var placeSearch
=
new
AMap.
PlaceSearch({
map: map
});
//详情查询 -> 首先定位到Xxx
placeSearch.
getDetails(
"Xxx",
function (
status,
result) {
if (status
===
'complete'
&& result.info
===
'OK') {
placeSearch_CallBack(result);
}
});
//搜索提示文本框 => 该处有段与之相匹配的html
//代码贴出来格式化有点问题,就不花时间弄了,能懂就行: O(∩_∩)O哈哈~
<
div
id=
"myPageTop">
<
table>
<
tr>
<
td>
<
label>请输入关键字:
label>
td>
tr>
<
tr>
<
td>
<
input
id=
"tipinput" />
td>
tr>
table>
div>
var autoOptions
= {
input:
"tipinput"
};
//搜索信息-自动匹配
var autocomplete
=
new
AMap.
Autocomplete(autoOptions);
AMap.event.
addListener(autocomplete,
"complete",
function (
e) {
console.
log(e);
});
//自定义监听——注册监听,当选中某条记录时会触发
AMap.event.
addListener(autocomplete,
"select", select);
//
function
select(
e) {
console.
log(e.poi)
placeSearch.
setCity(e.poi.adcode);
//通过ID定位
placeSearch.
getDetails(e.poi.id,
function (
status,
result) {
if (status
===
'complete'
&& result.info
===
'OK') {
placeSearch_CallBack(result);//执行回调函数
}
});
}
//通过
infoWindow 显示信息
var infoWindow
=
new
AMap.
InfoWindow({
autoMove:
true,
offset: { x:
0, y:
-
30 }
});
//回调函数
function
placeSearch_CallBack(
data) {
var poiArr
= data.poiList.pois;
//添加marker
var marker
=
new
AMap.
Marker({
map: map,
position: poiArr[
0].location
});
map.
setCenter(marker.
getPosition());
infoWindow.
setContent(
createContent(poiArr[
0]));
infoWindow.
open(map, marker.
getPosition());
}
//信息窗体 infoWindow 内容
function
createContent(
poi) {
var s
= [];
s.
push(
"名称:"
+ poi.name
+
"");//里面有很多信息可以自定义
s.
push(
"地址:"
+ poi.address);
s.
push(
"电话:"
+ poi.tel);
s.
push(
"类型:"
+ poi.type);
s.
push(
"经度:"
+ poi.location.lng);
s.
push(
"纬度:"
+ poi.location.lng);
return s.
join(
"
");
}
7、大功告成:
1)、本以为真的可以大功告成:其实浏览器会报错——AMap.PlaceSearch is not a constructor。
2)、这是为什么呢??
a、首先我们分析一波:上面这些事加载的一些控件/或插件 是不是还需要添加点什么呢?
答案:是的
应该还记得一开始我们打开的那个