前端项目中使用百度地图api，含实例

前言

一、使用百度地图接口的步骤

二、简单例子

1.第一个地图

2.控件

3.静态/动态添加点圈线面

4.文字标注、信息窗口

5. Web服务API-IP定位服务

6.Web服务API-地点检索服务

三、vue项目中使用百度地图接口的简单方式

1.public下方的index.html中导入

2. .vue文件中

前言

项目中加入地图是很常见的需求，今天以百度地图为例，总结一下引入地图的方法与实例

一、使用百度地图接口的步骤

1.注册百度地图的开发者帐号👇

百度地图https://lbsyun.baidu.com/

2.控制台-应用管理-我的应用

创建相应的项目，拿到自己的密钥--访问应用（AK）

3.参考开发文档进行开发即可

百度地图 Web开发 JavaScript API https://lbsyun.baidu.com/index.php?title=jspopularGL

二、简单例子

1.第一个地图

代码如下：替换上自己的密钥

 <!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">
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
    <title>我的第一个地图</title>
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
    </style>
</head>
 
<body>
    <div id="container"></div>
</body>
<script>
    var map = new BMapGL.Map("container");// 创建地图实例 
    var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标 
    map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别 
</script>
 
</html>复制

运行结果：

2.控件

可以给地图添加比例尺控件、缩放空间、城市列表控件以及开启滚轮缩放

     map.enableScrollWheelZoom(true); //滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);复制

3.静态/动态添加点圈线面

点

     //静态添加
    var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标
    var marker = new BMapGL.Marker(point); // 创建标注   
    map.addOverlay(marker); // 将标注添加到地图中
 
    //动态添加
    map.addEventListener("click", e => {
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        var m = new BMapGL.Marker(p);
        map.addOverlay(m);
    })复制

圈

BMapGL.Circle(圆心位置,半径，圆的样式)

     var circle = new BMapGL.Circle(point, 500, {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
    map.addOverlay(circle);复制

线

动态添加线是要借助双击事件，单击选点，双击划线。

BMapGL.Polyline(端点数组, 线的样式); 第一个参数为线的端点组成的数字，第二个参数是线的样式；第二个参数选填，不传为默认样式。

     //静态添加
    var polyline = new BMapGL.Polyline([
		    new BMapGL.Point(116.399, 39.910),
		    new BMapGL.Point(116.405, 39.920),
		    new BMapGL.Point(116.425, 39.900)
	    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polyline);
 
    //动态添加
    var lineArr = [];
    map.addEventListener("click", e => {
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        lineArr.push(p);
        var m = new BMapGL.Marker(p);
        map.addOverlay(m);
    })
    map.addEventListener("dblclick", () => {
        var polyline = new BMapGL.Polyline(lineArr, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5
        });
        map.addOverlay(polyline);
        lineArr = [];
 
    })复制

面

BMapGL.Polygon(端点数组, 面的样式); 同上线的方法。

若只想在画面上留下线/面，不想要选点，则可以参考下方代码中last的相关操作，借助map.removeOverlay()方法移除选点。

     //静态加面
    var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112, 39.920977),
        new BMapGL.Point(116.385243, 39.913063),
        new BMapGL.Point(116.394226, 39.917988),
        new BMapGL.Point(116.401772, 39.921364),
        new BMapGL.Point(116.41248, 39.927893)
    ], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
    map.addOverlay(polygon);
 
    //动态加面
    var lineArr = [];
    var last = null;
    map.addEventListener("click", e => {
        last ? map.removeOverlay(last) : "";//移除当前选的最后一个点
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        lineArr.push(p);
        var m = new BMapGL.Marker(p);
        last = m;
        map.addOverlay(m);
    })
    map.addEventListener("dblclick", () => {
        map.removeOverlay(last);
        var polygon = new BMapGL.Polygon(lineArr, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5,
            fillColor: "blue",
        })
        map.addOverlay(polygon);
        lineArr = [];
 
    })复制

4.文字标注、信息窗口

文字标注：可以写html标签

     var content = "hello<b>world</b>";
    var label = new BMapGL.Label(content, { // 创建文本标注
        position: point, // 设置标注的地理位置
        offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
    })
    map.addOverlay(label); // 将标注添加到地图中复制

信息窗口

内容同样可以写html标签，可以通过加事件来控制点击选点时打开信息窗口

     var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "标题" // 信息窗口标题
    }
    var content = `<h1>hello</h1><p style="color:blue">你好</p>`;
    var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
    //map.openInfoWindow(infoWindow, point); // 打开信息窗口
 
    //单击打开
    marker.addEventListener("click", e => {
        map.openInfoWindow(infoWindow, point); // 打开信息窗口
    })复制

5. Web服务API-IP定位服务

需要导入jquery 借助jq跨域

url中的ip可不填，自动获取

 <body>
    <div class="address"></div>
</body>
<script>
    $(function () {
        $.ajax({
            url: "http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll",
            dataType: "jsonp",
            success: function (res) {
                console.log(res);
                $(".address").html(res.content.address)
            }
        })
    })
</script>复制

6.Web服务API-地点检索服务

左上搜索框实现动态搜索

 //导入地图api
//导入jquery
 
//style
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
 
        .tip {
            position: absolute;
            top: 45px;
            z-index: 99999;
            background-color: rgba(0, 0, 0, .1);
        }
    </style>
 
<body>
    <input type="text" id="inp">
    <div class="tip"></div>
    <div id="container"></div>
</body>
<script>
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(113.6648, 34.7835);
    map.centerAndZoom(point, 17);
    map.enableScrollWheelZoom(true); //滚轮缩放
 
    //添加点
    var marker = new BMapGL.Marker(point); // 创建标注   
    map.addOverlay(marker); // 将标注添加到地图中
 
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: {
            map: map
        }
    });
    local.search("景点");
    $(function () {
        $("#inp").on("input", function () {
            // console.log($("#inp").val());
            $.ajax({
                url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=北京&city_limit=true&output=json&ak=您的ak`,
                dataType: "jsonp",
                success: function (res) {
                    console.log(res.result);
                    var str = "";
                    res.result.forEach(item => {
                        str += `<p class="item">${item.name}</p>`
                    });
                    $(".tip").html(str);
                }
            })
        })
        $(".tip").on("click", ".item", function () {
            local.search($(this).text());
            $(".tip").html("");
            $("#inp").val("");
            $("#inp").attr("placeholder", $(this).text());
        })
    })
</script>复制

三、vue项目中使用百度地图接口的简单方式

1.public下方的index.html中导入

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
</script>复制

2. .vue文件中

 <template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="container" ref="dom"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dom = ref();
let map;
onMounted(() => {
  map = new window.BMapGL.Map(dom.value);
  var point = new window.BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);
  map.setMapType(window.BMAP_EARTH_MAP);
})
</script>
<style>
#container {
  height: 600px;
  width: 800px;
}
</style>复制

	<!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">
	<script type="text/javascript"
	src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
	<title>我的第一个地图</title>
	<style type="text/css">
	#container {
	height: 600px;
	width: 800px;
	}
	</style>
	</head>

	<body>
	<div id="container"></div>
	</body>
	<script>
	var map = new BMapGL.Map("container");// 创建地图实例
	var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标
	map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
	</script>

	</html>

	map.enableScrollWheelZoom(true); //滚轮缩放
	var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
	map.addControl(scaleCtrl);
	var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
	map.addControl(zoomCtrl);
	var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
	map.addControl(cityCtrl);

	//静态添加
	var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标
	var marker = new BMapGL.Marker(point); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中

	//动态添加
	map.addEventListener("click", e => {
	var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
	var m = new BMapGL.Marker(p);
	map.addOverlay(m);
	})

	var circle = new BMapGL.Circle(point, 500, {
	strokeColor: "blue",
	strokeWeight: 2,
	strokeOpacity: 0.5
	});
	map.addOverlay(circle);

	//静态添加
	var polyline = new BMapGL.Polyline([
	new BMapGL.Point(116.399, 39.910),
	new BMapGL.Point(116.405, 39.920),
	new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
	map.addOverlay(polyline);

	//动态添加
	var lineArr = [];
	map.addEventListener("click", e => {
	var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
	lineArr.push(p);
	var m = new BMapGL.Marker(p);
	map.addOverlay(m);
	})
	map.addEventListener("dblclick", () => {
	var polyline = new BMapGL.Polyline(lineArr, {
	strokeColor: "blue",
	strokeWeight: 2,
	strokeOpacity: 0.5
	});
	map.addOverlay(polyline);
	lineArr = [];

	})

	//静态加面
	var polygon = new BMapGL.Polygon([
	new BMapGL.Point(116.387112, 39.920977),
	new BMapGL.Point(116.385243, 39.913063),
	new BMapGL.Point(116.394226, 39.917988),
	new BMapGL.Point(116.401772, 39.921364),
	new BMapGL.Point(116.41248, 39.927893)
	], {
	strokeColor: "blue",
	strokeWeight: 2,
	strokeOpacity: 0.5
	});
	map.addOverlay(polygon);

	//动态加面
	var lineArr = [];
	var last = null;
	map.addEventListener("click", e => {
	last ? map.removeOverlay(last) : "";//移除当前选的最后一个点
	var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
	lineArr.push(p);
	var m = new BMapGL.Marker(p);
	last = m;
	map.addOverlay(m);
	})
	map.addEventListener("dblclick", () => {
	map.removeOverlay(last);
	var polygon = new BMapGL.Polygon(lineArr, {
	strokeColor: "blue",
	strokeWeight: 2,
	strokeOpacity: 0.5,
	fillColor: "blue",
	})
	map.addOverlay(polygon);
	lineArr = [];

	})

	var content = "hello<b>world</b>";
	var label = new BMapGL.Label(content, { // 创建文本标注
	position: point, // 设置标注的地理位置
	offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
	})
	map.addOverlay(label); // 将标注添加到地图中

	var opts = {
	width: 250, // 信息窗口宽度
	height: 100, // 信息窗口高度
	title: "标题" // 信息窗口标题
	}
	var content = `<h1>hello</h1><p style="color:blue">你好</p>`;
	var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
	//map.openInfoWindow(infoWindow, point); // 打开信息窗口

	//单击打开
	marker.addEventListener("click", e => {
	map.openInfoWindow(infoWindow, point); // 打开信息窗口
	})

	<body>
	<div class="address"></div>
	</body>
	<script>
	$(function () {
	$.ajax({
	url: "http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll",
	dataType: "jsonp",
	success: function (res) {
	console.log(res);
	$(".address").html(res.content.address)
	}
	})
	})
	</script>

	//导入地图api
	//导入jquery

	//style
	<style type="text/css">
	#container {
	height: 600px;
	width: 800px;
	}

	.tip {
	position: absolute;
	top: 45px;
	z-index: 99999;
	background-color: rgba(0, 0, 0, .1);
	}
	</style>

	<body>
	<input type="text" id="inp">
	<div class="tip"></div>
	<div id="container"></div>
	</body>
	<script>
	var map = new BMapGL.Map("container");
	var point = new BMapGL.Point(113.6648, 34.7835);
	map.centerAndZoom(point, 17);
	map.enableScrollWheelZoom(true); //滚轮缩放

	//添加点
	var marker = new BMapGL.Marker(point); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中

	var local = new BMapGL.LocalSearch(map, {
	renderOptions: {
	map: map
	}
	});
	local.search("景点");
	$(function () {
	$("#inp").on("input", function () {
	// console.log($("#inp").val());
	$.ajax({
	url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=北京&city_limit=true&output=json&ak=您的ak`,
	dataType: "jsonp",
	success: function (res) {
	console.log(res.result);
	var str = "";
	res.result.forEach(item => {
	str += `<p class="item">${item.name}</p>`
	});
	$(".tip").html(str);
	}
	})
	})
	$(".tip").on("click", ".item", function () {
	local.search($(this).text());
	$(".tip").html("");
	$("#inp").val("");
	$("#inp").attr("placeholder", $(this).text());
	})
	})
	</script>

	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
	</script>

	<template>
	<div class="about">
	<h1>This is an about page</h1>
	<div id="container" ref="dom"></div>
	</div>
	</template>
	<script setup>
	import { ref, onMounted } from 'vue'
	const dom = ref();
	let map;
	onMounted(() => {
	map = new window.BMapGL.Map(dom.value);
	var point = new window.BMapGL.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	map.enableScrollWheelZoom(true);
	map.setMapType(window.BMAP_EARTH_MAP);
	})
	</script>
	<style>
	#container {
	height: 600px;
	width: 800px;
	}
	</style>

前端项目中使用百度地图api，含实例

前言

一、使用百度地图接口的步骤

二、简单例子

1.第一个地图

2.控件

3.静态/动态添加点圈线面

4.文字标注、信息窗口

5. Web服务API-IP定位服务

6.Web服务API-地点检索服务

三、vue项目中使用百度地图接口的简单方式

1.public下方的index.html中导入

2. .vue文件中

微信扫一扫：分享