web前端实现高德地图、引用、引入

文章目录

  • 1、基础引用
    • 1.1、成为开发者并创建key
    • 1.2、代码实现
    • 1.3、其他注意点
  • 2、vue中使用


1、基础引用

1.1、成为开发者并创建key

登录高德开放平台控制台,如果没有开发者账号,请注册开发者,创建key的流程。


1.2、代码实现

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .map_el {
            width: 100vw;
            height: 100vh;
        }
    style>
head>

<body>
    <div id='idMap' class="map_el">div>

    <script>
        window._AMapSecurityConfig = {
        	// securityJsCode: '您申请的安全密钥',
            securityJsCode: '2a4423306dfdcd5814d0c15289682517',
        };
    script>

    
    <script src="https://webapi.amap.com/maps?v=2.0&key=7f69a44038c6d4ccd626d15289682517">script>

    <script>
        // 地图初始化应该在地图容器div已经添加到DOM树之后
        let map = new AMap.Map('idMap', {
        	// 地图加载时的位置(经纬度)
            center: [108.29261718701933, 22.8601224155598],
            showLabel: true,
            // 地图首次加载的缩放层度
            zoom: 15
        });
		
		// 地图实例
        console.log('map:', map);
    script>
body>

html>

1.3、其他注意点

1.3.1、 KEY异常,错误信息:INVALID_USER_DOMAIN
此异常在控制台的显示颜色不为红色,特别要留意。此时地图不显示,能正常实例化。此时需要重新申请一个key就可以了。
1.3.2、设置地图的元素一定要设置宽高,因为地图不会自动撑开。


2、vue中使用

你可能感兴趣的:(web,map,地图,前端,web)