您的位置：首页 > Web前端 > JavaScript

使用高德JS-API进行基于LBS的开发-地图初始化&地图控件

2018-01-24 11:57 543 查看

框架代码:

<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
<meta charset="utf-8">
<title>简单Demo</title>
</head>
<body style="width:100%;height:100%;margin:0;">
<div id="map" style="width:100%;height:100%;"></div>
<script type="text/javascript"src="http://webapi.amap.com/maps?v=1.4.3&key=7d3d82555540970d7f65b871e2e40ddc"></script>
<script type="text/javascript">
(function(){
var map = new AMap.Map('map');
map.setCity("桂林市");
console.log(map.getCenter());
map.setZoom(18);
console.log(map.getZoom());
</script>
</body>
</html>


添加按钮

<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>


按钮事件

document.getElementById("zoomin").onclick = function(){
map.zoomIn();
};
document.getElementById("zoomout").onclick = function(){
map.zoomOut();
};


添加监听事件

AMap.event.addListener(map,'dragend',function(){
alert("拖拽监听……");
});


引入控件

/*
* 增加地图控件
* 1.实例化控件
* 2.通过map.addControl添加控件
*/
//地图比例尺AMap.scale
map.plugin(['AMap.Scale'],function(){
var scale = new AMap.Scale();
map.addControl(scale);
});
//地图类型切换AMap.MapType
map.plugin(['AMap.MapType'],function(){
var type = new AMap.MapType();
map.addControl(type);
});
//鹰眼控件AMap.OverView
map.plugin(['AMap.OverView'],function(){
var view = new AMap.OverView();
view.open();//默认false，调用open方法显示
map.addControl(view);
});
//工具条AMap.ToolBar
map.plugin(['AMap.ToolBar'],function(){
var bar = new AMap.ToolBar();
map.addControl(bar);
});


插件

//插件
//鼠标工具AMap.MouseTool
map.plugin(['AMap.MouseTool'],function(){
var tool = new AMap.MouseTool(map);
tool.measureArea();
});
//距离量算AMap.RangingTool
map.plugin(['AMap.RangingTool'],function(){
var tool = new AMap.RangingTool(map);
tool.turnOn();
});


效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 高德JS-API LBS开发
相关文章推荐
新的分享
章节导航