高德地圖API--- 地圖控制元件與外掛
阿新 • • 發佈：2019-01-27
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px;
}
</style>
<title>高德地圖</title>
</head>
<body><div id="container" tabindex="0"></div>
<div id="zoomin" style="position: absolute; left: 10px; bottom: 120px; width: 60px; height: 40px;z-index: 160; background-color:#008cff;color:#fff; border-radius: 3px; line-height: 40px; text-align: center; cursor: pointer;">放大</div>
<div id="zoomout" style="position: absolute; left: 10px; bottom: 60px; width: 60px; height: 40px;z-index: 160; background-color:#008cff;color:#fff; border-radius: 3px; line-height: 40px; text-align: center; cursor: pointer;">縮小</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=此處輸入您自己申請的key值"></script>
<script type="text/javascript">
/* var map = new AMap.Map('container',{
zoom: 15//用來設定地圖的級別在高德中zoom的取值範圍為【3-18】其中值越大顯示的越詳細，也可以通過setZoom（）來設定
});*///這個與下面的一樣
var map= new AMap.Map('container');
map.setCity("北京市");//用來定位那個城市
map.setZoom(15);
//進行地圖的縮放函式的繫結
document.getElementById('zoomin').onclick = function(){
//放大地圖
map.zoomIn();
};
document.getElementById('zoomout').onclick = function () {
//縮小地圖
map.zoomOut();
};
///載入比例尺控制元件
map.plugin(['AMap.Scale'], function(){
var scale = new AMap.Scale();
map.addControl(scale);
});
//載入地圖型別
map.plugin(['AMap.MapType'], function(){
var type= new AMap.MapType();
map.addControl(type);
});
//載入鷹眼工具
map.plugin(['AMap.OverView'], function () {
var view = new AMap.OverView();
//因為在LBS中鷹眼檢視工具預設為BOOL:False,所以在測試時可以用open函式來讓它預設為開啟；
view.open();
map.addControl(view);
});
//載入工具條模組
map.plugin(['AMap.ToolBar'], function(){
var tool = new AMap.ToolBar();
map.addControl(tool);
});
// 測距工具控制元件
//測量面積控制元件
map.plugin(['AMap.MouseTool'], function(){
var tool = new AMap.MouseTool(map);
tool.measureArea();
});
/* // 測量兩點間長度控制元件
map.plugin(['AMap.RangingTool'], function () {
var tool = new AMap.RangingTool(map);
tool.turnOn();
})*/
</script>
</body>
</html>