地图组成&常用名词
第一部分:创建地图标准底图
第一步:添加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>
待续