AMap(创建基础地图)

实现代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>AMap创建地图</title>
    <style>
        html,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        /* 涉及到的布尔类型的属性
        animateEnable:地图平移过程中是否使用动画(默认为true)
        resizeEnable:是否监控地图容器尺寸变化(默认为false)
        isHotspot:是否开启地图热点和标注的hover效果(PC端默认为true,移动端默认为false) 
        rotateEnable:地图是否可旋转(3D视图默认为true,2D视图默认为false)
        dragEnable:地图是否可通过鼠标拖拽平移(默认为true)
        zoomEnable:地图是否可缩放(默认为true)
        doubleClickZoom:地图是否可通过双击鼠标放大地图(默认为true)
        keyboardEnable:地图是否可通过键盘控制(默认为true)
        jogEnable:地图是否使用缓动效果(默认为true)
        scrollWheel:地图是否可通过鼠标滚轮缩放浏览(默认为true)
        touchZoom:地图在移动终端上是否可通过多点触控缩放浏览地图(默认为true)
        showBuildingBlock: 地图显示3D楼块效果,移动端也可使用(默认为true) 【注】实测结果,语言类型为中文时才生效
        pitchEnable: 地图能否调节俯仰角度(3D视图默认为true,2D视图下无效)
        buildingAnimation: 楼块出现和消失的时候是否显示动画过程(3D视图有效,PC端默认为true,手机端默认为false) */
       
        // 地图默认的缩放级别,zooms属性可以用数组来规定缩放范围,PC端默认为[3,18],取值范围[3-18];移动端默认为[3,19],取值范围[3-19]
        zoom: 13,
        // 中心点经纬度坐标(默认为所在市区)
        center: [121.48612, 31.24166],
        // 使用3D视图(默认为2D)
        viewMode:'3D',
        // 地图俯仰角度(默认为0),取值范围为[0,83],2D地图下无效
        pitch:30,
        // 地图语言类型(默认为中文简体),可取值:'zh_cn'(中文简体),'en'(英文),zh_en中英文双语
        lang: 'zh_cn'          
    });
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值