JavaScript如何操作实现一个地图并标记到自身当前位置（本文从创建key值开始，到实现标点结束）

入冉心

已于 2023-10-18 08:39:46 修改

阅读量679

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2023-10-17 20:49:42 首次发布

本文链接：https://blog.csdn.net/rr20060119/article/details/133892885

版权

JavaScript如何操作实现一个地图并标记到自身当前位置

前言

地图分为很多种，有腾讯，百度，高德等等，本篇文章使用的是高德地图的api，本文会先带领大家从如何获取 key值开始，到实现获取自身定位结束。

一、如何获取高德地图的key值

1.首先我们需要搜索高德地图开放平台并且打开：

2. 然后呢我们需要登录自己的平台账号，登录后呢，打开控制台：

3.点击管理key值，进行添加key值的操作:

二、如何创建地图并且获取自身定位

（1）先设置地图容器的样式：

        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

（2）然后设置地图容器：

<div id="container"></div>

（3）再引入script，添加自己的key值：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你自己申请的key值"></script>

（4）设置JavaScript的操作代码，渲染地图：

  var map = new AMap.Map('container', {
        resizeEnable: true,
        viewMode: "3D",
        zoom: 15,
        center: [116.335183, 39.941735]
    });

（5）这样我们就会得到这样一个页面：

（6）如果想要地图方向盘和缩放功能的话，我们可以再加上这行代码：

 AMap.plugin(["AMap.ControlBar"], function () {
        var bar = new AMap.ControlBar();
        map.addControl(bar);
    });

（7）现在得到的效果是这样的：

（8）下面呢继续进行获取定位的操作：

  AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 使用高精度定位
            timeout: 10000, // 超过10秒后停止定位
            zoomToAccuracy: true, // 定位成功后自动调整地图视野
            buttonPosition: 'RB' // 定位按钮位置，'LB'为左下角，'RB'为右下角
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
                // 定位成功后的操作
                var lng = result.position.lng;
                var lat = result.position.lat;

                // 创建自定义图标
                var marker = new AMap.Marker({
                    position: [lng, lat],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标
                    offset: new AMap.Pixel(-12, -36) // 图标偏移位置
                });
                map.add(marker);
            } else {
                // 定位失败后的操作
                console.error('定位失败');
            }
        });
    });

附加以上这串代码就可以实现获取自身定位并标点了。

三、以下是完整代码

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ImageLayer</title>
    <meta id="viewport" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"/>
    <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=11b9b0045f8bc94b504861e860d3d359"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        viewMode: "3D",
        zoom: 15,
        center: [116.335183, 39.941735]
    });

    // 添加定位插件
    AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 使用高精度定位
            timeout: 10000, // 超过10秒后停止定位
            zoomToAccuracy: true, // 定位成功后自动调整地图视野
            buttonPosition: 'RB' // 定位按钮位置，'LB'为左下角，'RB'为右下角
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
                // 定位成功后的操作
                var lng = result.position.lng;
                var lat = result.position.lat;

                // 创建自定义图标
                var marker = new AMap.Marker({
                    position: [lng, lat],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标
                    offset: new AMap.Pixel(-12, -36) // 图标偏移位置
                });
                map.add(marker);
            } else {
                // 定位失败后的操作
                console.error('定位失败');
            }
        });
    });
    
    AMap.plugin(["AMap.ControlBar"], function () {
        var bar = new AMap.ControlBar();
        map.addControl(bar);
    });

</script>
</body>
</html>

四、效果图：

入冉心

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
JavaScript如何操作实现一个地图并标记到自身当前位置（本文从创建key值开始，到实现标点结束）

地图分为很多种，有腾讯，百度，高德等等，本篇文章使用的是高德地图的api，本文会先带领大家从如何获取 key值开始，到实现获取自身定位结束。
复制链接

扫一扫