高德地图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;//实例化marker
			marker = 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文件的