day1_test_webgis_map

webgis day1.地图显示

详情效果参看 http://localhost:4000/HTML/webgis/01test.html

大概4个步骤

引入资源即通过key，和安全密钥连接高德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>

此方法适用于开发模式

创建一个地图容器
<div id="container"></div>

定义一个变量绑定保存amap对象并绑定容器

<script>
    let map=new AMap.Map('container');//定义一个变量，保存对象
</script>

定义容器宽度与高度

<style>
        #container{
            width: 300px;
            height: 300px;
        }
    </style>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    window._AMapSecurityConfig={
        securityJsCode: '你的安全密钥'
    }
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key={your key}"></script>
<script>
    let map=new AMap.Map('container');
</script>
</body>
</html>