高德地图api的自定义地点标注

最近在做一个使用高德地图api展示自定义地点的项目，为什么会使用高德，而不使用百度、谷歌等其他公司的api开发，这纯粹是因为个人的偏好，笔者本人因为长期使用高德导航，所以对它颇多青睐。

高德地图提供的api包括Android，iOS，javascript的api，开发文档非常的详细，如果担心开发文档看不懂的同学，高德还提供了详尽的开发实例，现成的代码再I加上可以实时修改代码运行程序，用户体验真的不错。

好，言归正传。接来下说说我的项目，首先是的在html中引入我们所需要的高德地图api的外部文件

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您的key值"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

至于key值，各位可以在高德的开发者控制台去自动获取，首先你得注册一个账号，随便你的一个 邮箱便可以搞定。这两个库是必须的，没有它就无法显示地图。接下来要在

html文件的body位置写入需要显示的地图在什么位置：

<div id="container"></div>

另外我们还需要引入一个js文件，什么js文件呢？就是模拟数据库的一个js文件，当然你也可以新建一个json文件，引入的代码就不用多说了，这里我写一下里面的内容：

var park = [{'name' : '鸿禧花园','center' : '104.080000,30.670000','type' : 1,'index' :1,'icon' :'img/blue.png','address': '四川成都一环路南一段1号','state': 1,'cpu': '30%','subDistricts' : []
},{'name' : '金港湾','center' : '104.000000,30.670000','type' : 1,'index' :2,'icon' :'img/red.png','address': '四川成都一环路南一段1号','state': 2,'cpu': '37%','subDistricts' : []
},{'name' : '今日田园','center' : '103.920000,30.670000','type' : 1,'index' :3,'icon' :'img/red.png','address': '四川成都一环路南一段1号','state': 2,'cpu': '45%','subDistricts' : []
},{'name' : '煦华国际','center' : '104.080000,30.600000','type' : 1,'index' :4,'icon' :'img/black.png','address': '四川成都一环路南一段1号','state': 3,'cpu': '50%','subDistricts' : []
}];

稍微解释一下，center属性是指这个标注点的经纬度位置，地图定位的依据就是来源于经纬度的位置，icon属性是标注点的图标，这里我用的是自己做的图标，这里的属性

值是url格式的，只需要你的图片的路径，当然你也可以不设置，那就会使高德默认的蓝色水滴图标，反正我觉得那个图标很丑，所以自己做了一个。其他的都是可有可无的。

    最终我们的目的是把我们需要的图标展示在地图上，这就需要我们强大的js了。直接上代码：

  var map = new AMap.Map('container', {resizeEnable: true,zoom : 10 });//点击合法marker重定向到parkInfo页面var _onClick = function(e) {window.open("parkInfo.html?id="+this.G.index,"_blank");}//循环输出数据库中所有的点的位置和信息var markers = [];for(var i = 0;i <= park.length;i+=1){var marker;//实例化markermarker = new AMap.Marker({position: park[i].center.split(','),title: park[i].name,//鼠标移入显示停车场的名称map: map,index: park[i].index,icon: park[i].icon//自定义显示在地图上的图标});markers.push(marker);//给所有的点标注添加点击事件AMap.event.addListener(marker, 'click', _onClick);}  //设置地图自适应map.setFitView();

我这是在每个标注点上添加了一个点击事件，让他重定向到指定的页面，然后将点击的标注点的id通过url传到下一个页面，用来获取该点的信息。

 好了，这个项目 就在简单的几行代码中做完了，当然你还可以给地图加上许多样式，还有许多的api可供选择。

至于key值，各位可以在高德的开发者控制台去自动获取，首先你得注册一个账号，随便你的一个 邮箱便可以搞定。这两个库是必须的，没有它就无法显示地图。接下来要在

html文件的

高德地图api的自定义地点标注相关推荐

利用高德地图API批量获取地点经纬度和行车线路与OD距离（excel和python）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.excel调取API方法 1.申请一个key 2.excel调用API 二.python方法计算地址列表中两两之 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
高德地图API 添加标点自定义标点
高德地图API 添加标点自定义标点在我们创建完地图实例后,就可以在地图中添加遮盖物,覆盖物有多种类型,今天只说点标记首先构造一个点标记添加默认样式点标记 // 构造点标记 var marker ...
高德地图API入门-marker标注以及区域色块着色
1.vue高德地图api安装 npm i @amap/amap-jsapi-loader --save 2.地图初始化,加载卫星titlemap initMap(){// window._AMapSe ...
使用高德地图api点聚合案例 (自定义样式)
高德地图api地址:https://lbs.amap.com/api/javascript-api/reference/map 1.异步创建script标签注意需要MarkerClusterer插件 ...
如何调用高德地图api
首先注册成为高德地图开发者,创建应用后申请key. 1.引入高德地图API <script type="text/javascript" src="http://w ...
Android 高德地图API（详细步骤+源码）
高德地图API使用详解前言正文一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...

高德地图api的自定义地点标注

高德地图api的自定义地点标注相关推荐

最新文章

热门文章