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里面的<script>标签图(如图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哈哈~

<table>

<tr>

<td>

<label>请输入关键字：</label>

</td>

</tr>

<tr>

<td>

</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("<b>名称：" + poi.name + "</b>");//里面有很多信息可以自定义

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("<br>");

}

  7、大功告成：

       1)、本以为真的可以大功告成：其实浏览器会报错——AMap.PlaceSearch is not a constructor。

       2)、这是为什么呢？？

           a、首先我们分析一波：上面这些事加载的一些控件/或插件 是不是还需要添加点什么呢？

               答案：是的

               应该还记得一开始我们打开的那个<script>标签里面填写您申请的key,

               其实那只是一个请求的URL,所以后面是可以跟参数的——我们试一试!

           b、真的大功告成啦！

      PS：其实这个问题是不应该犯的——因为高德地图API 里面已经有清晰的例子说明了，

      那为什么还要吧错误展示出来了？

       仅仅是提供一种遇到问题后，该怎么分析、解决问题的思路而已

      ——多思考、多分析、多撸代码(程序员的捷径就是:狂敲代码——把键盘敲破！)

 8、在高德地图里面还有很多好玩的东西：必须周边搜索、公交、路线、等等。只要你愿意

          花时间，肯定能成功！

  9、真心话：高德的API写的非常的优雅、简洁！ 10、时间不早啦，马上都一点钟了，格式什么的就不排版啦。望里面的内容能够帮助到大家。  11、感谢：①感谢大漠老师的NiceFish开源项目       ②感谢那个在isuue里面提出解决方案的仁兄。       ③感谢挑灯夜战的自己  12、署名：     Photowey      2017-09-05 01:00  13、再次申请：       事例项目代码为：NiceFish;      参照内容来源于高德地图API    14、由于时间紧迫、可能会有不恰当或不正确的地方，望指正！   15、第一次写还不怎么会搞这个编译器,格式全乱啦。/(ㄒoㄒ)/~~

angular4与高德地图的结合相关推荐

js如何同时打开多个信息窗口高德地图_高德地图-展示多个信息窗口
1.问题背景高德地图,设置小图标,并点击图标显示信息 2.实现源码高德地图展示多个信息窗口 //初始化地图对象,加载地图 var map = new AMap.Map("containe ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
html 高德地图坐标,百度地图，高德地图，HTML5经纬度比较
对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了. 在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地 ...
安卓开发高德地图 marker 点击移动位置_高德手机AR导航再升级，有惊喜
高德地图发布V10.70新版本啦AR驾车导航服务再次升级支持连接车内行车记录仪! 由行车记录仪的摄像头充当"眼睛",实时捕捉现实道路画面,再通过手机地图呈现直观的3D导航指引,为 ...
Swift基础 - - 高德地图实践
高德地图开发需要自己到官网http://lbs.amap.com/console/ 注册一个ak,新建一个swift工程,然后在Info.plist中添加一个NSLocationAlwaysUsage ...
如何实现在H5里调起高德地图APP？（下）
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从"我的位置"到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 ...
高德地图小蓝点_一会晴天一会下雨？夏日想要顺利出行高德地图这些小功能最实用...
不同于其他三个季节,夏天总是有很多种烦恼,变化不定的天气就是其中最为影响出行的一项因素.而面对忽晴忽雨的天气,如何才能在夏日顺利出行呢?看看高德地图的这些实用小功能吧. ·实时天气预报高德地图可以实 ...
高德地图2020最新版下载导航wince_导航定位错误致青城山严重拥堵，高德地图回应：已优化...
钛媒体 TMTPost.com|科技引领新经济| ▎景区官方表示,错误导航问题已存在多年,景区多次与高德地图方联系,要求对青城前山景区导航路线进行修改优化,但均未果. 钛媒体编辑丨石万佳钛媒体App ...
高德地图多边形覆盖物添加、获取、删除
最近在做有关地图的项目汇总一下方便以后使用不喜勿喷上图是覆盖物绘制完成之后的编辑状态引入高德地图js <script src="https://webapi.amap.com ...
AngularJS指令封装高德地图组件
2019独角兽企业重金招聘Python工程师标准>>> 1 概述公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图 ...

angular4与高德地图的结合

angular 4 与高德地图的结合

angular4与高德地图的结合相关推荐

最新文章

热门文章