高德地图基础设置

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.LngLat116.404, 39.915); // 创建点坐标
        mapObj.setCenterpoint); // 设置地图中心点坐标
    }
</script>
</head>  

<body onload="initialize)">  
    <div id="container"></div>
</body>
</html>

2.mapObj的属性和方法

属性

level:13,　　　　　　　　　　　　　　　　　　        //设置地图缩放级别

center:new AMap.LngLat116.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.addControltoolbar);      
   　　  overview = new AMap.OverView); //加载鹰眼


   　　  mapObj.addControloverview);      
   　　  scale = new AMap.Scale); //加载比例尺


    　　 mapObj.addControlscale);
    });

panBy　　　　设置按像素点移动

    var x = document.getElementById"x").value;
    var y = document.getElementById"y").value;
    mapObj.panByparseIntx),parseInty));

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.LngLatswx,swy);
    var ne = new AMap.LngLatnex,ney);
    mapObj.setBoundsnew AMap.Boundssw,ne));

setZoom　　缩放级别

    var z = document.getElementById"zoom").value;
    mapObj.setZoomz);

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

setCenter 设置地图中心点

    var lng = document.getElementById"lng").value;
    var lat = document.getElementById"lat").value;
    mapObj.setCenternew AMap.LngLatlng,lat));

Published by

风君子

近期文章

标签