查看德国旅游地图 德国地图中文版全图 高德地图jsapi调用——德国地图全图高清版
高德地图jsapi调用
|
今天公司项目要做一个基于地图的位置展示，在网上找了下，发现高德地图开放api能满足功能，现对其应用做一下简单的记录。 1.首先在高德开发平台上注册，简单填写相关信息后，可以获得key，拿到key后可以调用高德地图api的相关接口。 2.在调用api的相关页面引入高德api，eg： <script type="text/javascript" src="?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="width:85%; height:500px;margin:0;"></div> 需要说明的是，显示位置放在table中会有显示不出来的问题，推荐放在div中进行位置改变。 5.在地图特定位置显示信息，eg： var info = []; info.push("<div><div><img 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:"", position:new AMap.LngLat(x,y), offset:new AMap.Pixel(-26,-13), autoRotation:true }); marker.setMap(mapObj); //在地图上添加点 7.上面是一些简单的api调用，详细的高德开放平台都有提供相应的api，可具体情况具体对待。 |
| 上一篇：保时捷PCM3.1导航激活码,地图升级码 | 下一篇：红色按钮显示德国地区Rheinland |