Web前端实现高德地图、点标记锚点、引用、引入

务连往

已于 2024-09-14 09:49:07 修改

阅读量4.3k

点赞数 6

分类专栏： Web前端 JavaScript Vue 文章标签：前端 web web前端 vue javascript

于 2023-03-31 13:35:07 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/129877568

版权

Web前端同时被 3 个专栏收录

377 篇文章

订阅专栏

JavaScript

225 篇文章

订阅专栏

Vue

42 篇文章

订阅专栏

前言

1、登录高德开放平台控制台，如果没有开发者账号，请注册开发者，创建key的流程。
2、<AMap JSAPI> KEY异常，错误信息：INVALID_USER_DOMAIN
此异常在控制台的显示颜色不为红色，特别要留意。此时地图不显示，能正常实例化。此时需要重新申请一个key就可以了。
3、存放地图的元素一定要设置宽高，因为地图不会自动撑开。
4、高德地图文档>点标记>点标记锚点。
5、高德地图文档>自定义地图样式>标准样式主题。

基础引用

<!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=您申请的key值"></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>

点标记锚点

<!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_box {
            width: 100vw;
            height: 100vh;
        }
    </style>
    <script>
        window._AMapSecurityConfig = {
            securityJsCode: '2a4423306dfdcd5814d0cf2b9ff66003',
        }
    </script>

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

<body>
    <div id="idMap" class="map_box"></div>

    <script>
        // 创建地图实例并描点
        // dom: 元素id
        // center: 接入点经纬度
        // mapStyle: 设置地图主题(背景)，高德地图已经定好，不可自定义，使用高德的参数即可,
        // whitesmoke/darkblue
        // positions: 锚点经纬度(锚点经纬度的距离不要过大)
        // anchor: 标题信息等
        function initMap(dom = 'idMap', center = [116.473195, 39.973253], mapStyle = 'whitesmoke', positions = [
            [116.493195, 39.993253],
            [116.473195, 39.993253],
            [116.453195, 39.993253],
            [116.493195, 39.973253],
            [116.473195, 39.973253],
            [116.453195, 39.973253],
            [116.493195, 39.953253],
            [116.473195, 39.953253],
            [116.453195, 39.953253]
        ], anchor = [
            'top-right',
            'top-center',
            'top-left',
            'middle-right',
            'center',
            'middle-left',
            'bottom-right',
            'bottom-center',
            'bottom-left'
        ]) {
            let map = new AMap.Map(dom, {
                zoom: 13,
                center,
                resizeEnable: true,
                mapStyle: `amap://styles/${mapStyle}`
            }),
                // pos_icon = [],
                // pos_marker = [],
                icon = [],
                marker = [],
                infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(0, -30),
                });

            for (let i = 0; i < positions.length; i++) {
                // // 创建一个Icon(定义图标)
                // pos_icon[i] = new AMap.Icon({
                //     // 图标尺寸
                //     size: new AMap.Size(12, 12),
                //     // 图标的取图地址
                //     image: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker.png',
                //     // 图标所用图片大小
                //     imageSize: new AMap.Size(12, 12),
                // });

                // let labelContent = "<div class='labelContent'>anchor:" + anchor[i] + "</div>"

                // // 将Icon传入marker
                // pos_marker[i] = new AMap.Marker({
                //     position: positions[i],
                //     icon: pos_icon[i],
                //     // 设置锚点
                //     anchor: 'center',
                //     // 设置偏移量
                //     offset: new AMap.Pixel(0, 0)
                // });
                // map.add(pos_marker[i]);

                // 创建一个Icon(自定图标)
                // let imageUrl = '//a.amap.com/jsapi_demos/static/demo-center/marker/icon.png'

                // icon[i] = new AMap.Icon({
                //     // 图标尺寸
                //     size: new AMap.Size(0, 28),
                //     // 图标的取图地址
                //     image: imageUrl,
                //     // 图标所用图片大小
                //     imageSize: new AMap.Size(0, 28),
                // });

                // 将Icon传入marker
                // let labelOffset = new AMap.Pixel(-23, -28);

                // 设置默认图标
                marker[i] = new AMap.Marker({
                    position: positions[i],
                    icon: icon[i],
                    // 设置锚点
                    anchor: anchor[i],
                    // 设置偏移量
                    offset: new AMap.Pixel(0, 0),
                    // 描点上的文字
                    // label: {
                    //     content: labelContent,
                    //     offset: labelOffset
                    // }
                });

                // 鼠标经过窗口模板
                let tem = `<div>
	                <h5>名称: ${anchor[i]}</h5>
	                
	                <div>
	                	<div>经纬度: ${positions[i].toString()}</div>
	                </div>
                </div>`;
                // 鼠标经过事件
                marker[i].on("mouseover", () => {
                    infoWindow.setContent(tem);

                    infoWindow.open(map, positions[i]);
                });

                map.add(marker[i]);
            }

            return map;
        }

        console.log('map实例: ', initMap());
    </script>
</body>

</html>

Vue中使用

第一步

在vue中找到public文件夹，文件夹中有index.html文件。

<body>
	<div id="app"></div>
	
	<script>
		window._AMapSecurityConfig = {
			// securityJsCode: 安全密钥
			securityJsCode: '2a4423306dfdcd5814d0cf2b9ff6600386886',
		}
	</script>
	
	<!-- key -->
	<script src="https://webapi.amap.com/maps?v=2.0&key=7f69a44038c6d4ccd626dd86"></script>
</body>

第二步

在util文件夹中新建名为initMap.js文件。需要注意new后面要加window。

export let initMap = (dom = 'idMap', center = [116.473195, 39.973253], mapStyle = 'darkblue', positions = [
    [116.493195, 39.993253],
    [116.473195, 39.993253],
    [116.453195, 39.993253],
    [116.493195, 39.973253],
    [116.473195, 39.973253],
    [116.453195, 39.973253],
    [116.493195, 39.953253],
    [116.473195, 39.953253],
    [116.453195, 39.953253]
], anchor = [
    'top-right',
    'top-center',
    'top-left',
    'middle-right',
    'center',
    'middle-left',
    'bottom-right',
    'bottom-center',
    'bottom-left'
]) => {
    let map = new window.AMap.Map(dom, {
        zoom: 13,
        center,
        resizeEnable: true,
        mapStyle: `amap://styles/${mapStyle}`
    }),
        icon = [],
        marker = [],
        infoWindow = new window.AMap.InfoWindow({
            offset: new window.AMap.Pixel(0, -30),
        });

    for (let i = 0; i < positions.length; i++) {
        // 设置默认图标
        marker[i] = new window.AMap.Marker({
            position: positions[i],
            icon: icon[i],
            // 设置锚点
            anchor: anchor[i],
            // 设置偏移量
            offset: new window.AMap.Pixel(0, 0),
        });

        // 鼠标经过窗口模板
        let tem = `<div><h5>名称: ${anchor[i]}</h5><div><div>经纬度: ${positions[i].toString()}</div></div></div>`
        // 鼠标经过事件
        marker[i].on("mouseover", () => {
            infoWindow.setContent(tem);

            infoWindow.open(map, positions[i]);
        });

        map.add(marker[i]);
    }

    return map;
};

第三步

在main.js文件中全局注册。

import { initMap } from './util/initMap';

Vue.prototype.$initMap = initMap;

第四步

在页面中使用，使用mounted生命周期和$nextTick为了确保页面已经加载完成，DOM已生成。
mounted() {
	this.$nextTick(() => {
		// 默认不传参数
		this.$initMap();
	});
},

Web前端实现高德地图、点标记锚点、引用、引入

MENU

前言

基础引用

点标记锚点

Vue中使用