1.引用高德地图
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello, world</title>
<style type="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.1&key=<用户key>"></script>
<script type="text/javascript">
function initialize() {
var mapObj = new AMap.Map("container"); // 创建地图实例 container 就是在那块ID 上面去创建
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标
mapObj.setCenter(point); // 设置地图中心点坐标
}
</script>
</head>
<body onload="initialize()">
<div id="container"></div>
</body>
</html>
2.mapObj的属性和方法
属性
level:13, //设置地图缩放级别 center:new AMap.LngLat(116.397428,39.90923), //设置地图中心点 doubleClickZoom:true, //双击放大地图 scrollWheel:true //鼠标滚轮缩放地图
方法
addControl 设置控件
mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function() { //带插入的插件
toolbar = new AMap.ToolBar(); //实例化插件
toolbar.autoPosition=false; //加载工具条
mapObj.addControl(toolbar);
overview = new AMap.OverView(); //加载鹰眼
mapObj.addControl(overview);
scale = new AMap.Scale(); //加载比例尺
mapObj.addControl(scale);
});
panBy 设置按像素点移动
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
mapObj.panBy(parseInt(x),parseInt(y));
setBounds 设置地图视野级别
var swx = document.getElementById("swx").value;
var swy = document.getElementById("swy").value;
var nex= document.getElementById("nex").value;
var ney = document.getElementById("ney").value;
var sw = new AMap.LngLat(swx,swy);
var ne = new AMap.LngLat(nex,ney);
mapObj.setBounds(new AMap.Bounds(sw,ne));
setZoom 缩放级别
var z = document.getElementById("zoom").value;
mapObj.setZoom(z);
setStatus 状态设置 （都可在实例化操作中设置）
mapObj.setStatus({zoomEnable:true}); //允许缩放
mapObj.setStatus({zoomEnable:false})； //不允许缩放
mapObj.setStatus({dragEnable:true}); //允许拖拽
mapObj.setStatus({dragEnable:false}); //不允许缩放
mapObj.setStatus({keyboardEnable:true}); //允许键盘操作
mapObj.setStatus({keyboardEnable:false}); //不允许键盘操作
mapObj.setStatus({jogEnable:true}); //允许拖拽缓动效果
mapObj.setStatus({jogEnable:false}); //不允许拖拽缓动效果
mapObj.setStatus({continuousZoomEnable:true}); //允许缩放连续效果
mapObj.setStatus({continuousZoomEnable:false}); //不允许缩放连续效果
mapObj.setStatus({doubleClickZoom:true}); //允许双击放大地图
mapObj.setStatus({doubleClickZoom:false}); //不允许双击放大地图
mapObj.setStatus({scrollWheel:true}); //允许鼠标滚轮缩放地图
mapObj.setStatus({scrollWheel:false}); //不允许鼠标滚轮缩放地图
setCity 设置地图加载城市
var z = document.getElementById("city").value;
mapObj.setCity(z);
setCenter 设置地图中心点
var lng = document.getElementById("lng").value;
var lat = document.getElementById("lat").value;
mapObj.setCenter(new AMap.LngLat(lng,lat));
时间： 2024-08-09 09:01:39