vue或者H5实现百度地图拾取经纬度，并且搜索标记

最新推荐文章于 2023-08-31 10:35:21 发布

原创最新推荐文章于 2023-08-31 10:35:21 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #vue.js

vue前端同时被 2 个专栏收录

16 篇文章

订阅专栏

vue百度地图

2 篇文章

订阅专栏

本文介绍如何使用H5和Vue.js实现百度地图的坐标拾取功能。主要内容包括通过H5技术实现地图的基本操作，如点击获取经纬度、搜索地点等，并展示了如何在Vue.js项目中集成百度地图API，实现更复杂的功能。

1.H5实现百度地图坐标拾取

H5效果图展示
在这里插入图片描述

使用CDN方法引入百度地图的js文件

 <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3&services=true"></script>

话不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />
    <title>拾取坐标-百度地图API</title>
    <!-- css样式文件 -->
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            overflow: hidden;
        }
        
        #allmap {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        
        #r-result {
            width: 100%;
            font-size: 14px;
            position: absolute;
            top: 10px;
            left: 200px
        }
    </style>

</head>

<body>
    <!-- 地图盒子 -->
    <div id="allmap"></div>
    <!-- 搜索显示框 -->
    <div id="r-result">
        地址: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
        <input type="button" value="搜索" onclick="theLocation()" /> 经度:
        <input type="text" id="lng" /> 纬度：
        <input type="text" id="lat" />
        <button onclick="submit()">提交</button>
    </div>
    <!-- js文件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3&services=true"></script>
    <!-- 页面地图js方法 -->
    <script type="text/javascript">
        // 在指定容器创建地图实例并设置最大最小缩放级别
        var map = new BMap.Map("allmap", {
            minZoom: 5,
            maxZoom: 19
        });

        // 初始化地图，设置中心点和显示级别
        map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);

        // 开启鼠标滚轮缩放功能，仅对PC上有效
        map.enableScrollWheelZoom(true);

        // 将控件（平移缩放控件）添加到地图上
        map.addControl(new BMap.NavigationControl());

        // 为地图增加点击事件，为input赋值
        map.addEventListener("click", function(e) {
            document.getElementById('lat').value = e.point.lat;
            document.getElementById('lng').value = e.point.lng;

        });

        // 创建位置检索、周边检索和范围检索
        var local = new BMap.LocalSearch(map, {
            renderOptions: {
                map: map
            }
        });

        // 发起检索
        function theLocation() {
            var city = document.getElementById("cityName").value;
            if (city != "") {
                local.search(city);
            }
        };

        // 弹出经纬度 
        function submit() {
            var lat = document.getElementById('lat');
            var lng = document.getElementById('lng');
            alert("经度：" + lng.value + "\n" + "纬度：" + lat.value);
        };
    </script>
</body>
</html>