今天公司项目要做一个基于地图的位置展示,在网上找了下,发现高德地图开放api能满足功能,现对其应用做一下简单的记录。
1.首先在高德开发平台上注册,简单填写相关信息后,可以获得key,拿到key后可以调用高德地图api的相关接口。
2.在调用api的相关页面引入高德api,eg:
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=youKey">
</script>
3.根据初始位置创建地图实例,eg:
var position = new AMap.LngLat(x, y);
//创建地图实例
mapObj = new AMap.Map("container", {
view : new AMap.View2D({//创建地图二维视口
center : position,//创建中心点坐标
zoom : 10, //设置地图缩放级别
rotation : 0
//设置地图旋转角度
}),
lang : "zh_cn"//设置地图语言类型,默认:中文简体
});
4.在页面上进行初始化,一般在body上eg:
<body onload="initialize('121.476753','31.224349')">
地图显示位置在div中定义:
<div id="container" style="85%; height:500px;margin:0;"></div>
需要说明的是,显示位置放在table中会有显示不出来的问题,推荐放在div中进行位置改变。
5.在地图特定位置显示信息,eg:
var info = [];
info.push("<div><div><img width='67px' height='16px' style="float:left;" src="${ctx}/images/main/logo.png "/></div> ");
info.push("<div style="padding:0px 0px 0px 4px;"><b>上海北斗</b>");
info.push("x坐标:"+x);
info.push("y坐标:"+y);
info.push("地址 : 上海市虹口区欧阳路法兰桥创意园196号</div></div>");
infoWindow = new AMap.InfoWindow({
content:info.join("<br/>") //使用默认信息窗体框样式,显示信息内容
});
infoWindow.open(mapObj,new AMap.LngLat(x,y));
6.自定义图标点图标
//创建点图标
var marker = new AMap.Marker({
icon:"http://webapi.amap.com/images/marker_sprite.png",
position:new AMap.LngLat(x,y),
offset:new AMap.Pixel(-26,-13),
autoRotation:true
});
marker.setMap(mapObj); //在地图上添加点
7.上面是一些简单的api调用,详细的高德开放平台都有提供相应的api,可具体情况具体对待。