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

最新推荐文章于 2024-05-14 15:43:03 发布

姜崽

最新推荐文章于 2024-05-14 15:43:03 发布

阅读量1.7k

点赞数 3

分类专栏： vue前端 vue百度地图文章标签： html vue.js

本文链接：https://blog.csdn.net/qq_51296646/article/details/108986792

版权

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

16 篇文章 0 订阅

订阅专栏

vue百度地图

2 篇文章 0 订阅

订阅专栏

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>

2.vue实现百度地图拾取坐标及标注

2.1安装百度地图到本地项目

cnpm i vue-baidu-map --s

2.2 vue界面

点击看这里能明白

开源不易，谢谢支持，三连击走一走

姜崽

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
vue或者H5实现百度地图拾取经纬度，并且搜索标记

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"&gt
复制链接

扫一扫

专栏目录