高德地图基础设置

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

高德地图基础设置

Published by

风君子

发表回复取消回复

Published by

风君子

发表回复 取消回复

发表回复取消回复