最近在做一个使用高德地图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位置写入需要显示的地图在什么位置:
另外我们还需要引入一个js文件,什么js文件呢?就是模拟数据库的一个js文件,当然你也可以新建一个json文件,引入的代码就不用多说了,这里我写一下里面的内容:<div id="container"></div>
稍微解释一下,center属性是指这个标注点的经纬度位置,地图定位的依据就是来源于经纬度的位置,icon属性是标注点的图标,这里我用的是自己做的图标,这里的属性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' : [] }];
值是url格式的,只需要你的图片的路径,当然你也可以不设置,那就会使高德默认的蓝色水滴图标,反正我觉得那个图标很丑,所以自己做了一个。其他的都是可有可无的。
最终我们的目的是把我们需要的图标展示在地图上,这就需要我们强大的js了。直接上代码:
我这是在每个标注点上添加了一个点击事件,让他重定向到指定的页面,然后将点击的标注点的id通过url传到下一个页面,用来获取该点的信息。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();
好了,这个项目 就在简单的几行代码中做完了,当然你还可以给地图加上许多样式,还有许多的api可供选择。
至于key值,各位可以在高德的开发者控制台去自动获取,首先你得注册一个账号,随便你的一个 邮箱便可以搞定。这两个库是必须的,没有它就无法显示地图。接下来要在
html文件的