<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图基本页</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style type="text/css">
* {margin:0; padding:0;}
#container {position:absolute; width:100%; height:100%;}
</style>
<!-- 高德地图安全密钥，必须在JSAPI脚本加载之前进行设置，否则设置无效。 -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'bf6265ecbc9e4ebff9c297369b9b106d',
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=f016c324446cdc91ea3297560d1d5925&plugin=AMap.ControlBar,AMap.ToolBar,AMap.Scale,AMap.HawkEye,AMap.MapType,AMap.Geolocation" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container');
map.setZoomAndCenter(11, [120.149177,30.255714]);
//同步方式加载控件(url需添加plugin参数)
map.addControl(new AMap.ControlBar({position:{top:'10px',left:'10px'}}));
map.addControl(new AMap.ToolBar({position:{top:'110px',left:'40px'}}));
map.addControl(new AMap.Scale());
map.addControl(new AMap.HawkEye({isOpen:false}));
map.addControl(new AMap.MapType());
map.addControl(new AMap.Geolocation({position:{bottom:'40px',left:'10px'}}));
//异步方式加载控件(url无需添加plugin参数)
// AMap.plugin(['AMap.ControlBar','AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.Geolocation'],
// function(){
// map.addControl(new AMap.ControlBar({position:{top:'10px',left:'10px'}}));
// map.addControl(new AMap.ToolBar({position:{top:'110px',left:'40px'}}));
// map.addControl(new AMap.Scale());
// map.addControl(new AMap.HawkEye({isOpen:false}));
// map.addControl(new AMap.MapType());
// map.addControl(new AMap.Geolocation({position:{bottom:'40px',left:'10px'}}));
// }
// );
</script>
</body>
</html>说明：高德地图安全密钥和key需到开放平台申请并替换成自己的才能正常使用。
相关链接
[1].高德地图开放平台：https://lbs.amap.com/
评论（0）
暂无评论。