pc端高德Api学习

地图组成&常用名词

 第一部分：创建地图标准底图

第一步：添加div标签作为地图容器，同时为该div指定id属性；

<div id="container"></div> 

第二步：通过 css 为地图容器指定高度、宽度；

#container {width:300px; height: 180px; }  

 第三步：引入高德Api

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 

 第四步：简单创建一个地图。在构造参数中的container为准备阶段添加的地图容器的id

<script>
    // 第一张写法
    // 简单创建一个地图只需要一行代码，构造参数中的container为准备阶段添加的地图容器的id
    // var map = new AMap.Map('container');
    // 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性
    // 第二种写法
    var map = new AMap.Map('container',{
        zoom:12,//地图的缩放比例(3-20):值越大可视范围越小，精度越大
        center: [114.298572,30.584355],//设置中心点经纬度
        viewMode:'3D',//使用3D视图
        // pitch:45//俯仰角度，默认 0°C，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
    });
</script>

 第二部分：图层

默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：

var map = new AMap.Map('container', {
    center: [116.397428, 39.90923],
    zoom: 13
});
//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
    zIndex: 10
});
map.add(trafficLayer);//添加图层到地图

 第三部分：点标记Marker

JS API 提供了在地图之上绘制覆盖物的能力，比如点标记 Marker、文本标记 Text、圆点标记 CircleMarker。

添加点标记的方法非常简单，比如添加一个默认样式的Marker

<script type="text/javascript">
    var marker, map = new AMap.Map("container", {
        // resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    //点标记
    marker = new AMap.Marker({
        icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [116.406315, 39.908775],//位置
        offset: new AMap.Pixel(-13, -30)
    });
    map.add(marker);//添加到地图
</script>

 待续