高德地图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文件的