前端项目中如何使用百度地图api(含实例)
更新时间：2023年06月10日 10:33:28 作者：Me-Wow！
当我们遇到定位展示的时候会出现使用地图展示的需求,下面这篇文章主要给大家介绍了关于前端项目中如何使用百度地图api(含实例)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
项目中加入地图是很常见的需求，今天以百度地图为例，总结一下引入地图的方法与实例
一、使用百度地图接口的步骤
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()}®ion=北京&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>总结
到此这篇关于前端项目中如何使用百度地图api的文章就介绍到这了,更多相关前端使用百度地图api内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了如何使用vue实现跨域访问第三方http请求,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
vue3.0项目小白填坑之vue3.0+vite获取环境变量
Vue3项目使用vite作为打包工具时,环境变量可以保存在.env文件中,在build时进行解析,这篇文章主要给大家介绍了关于vue3.0项目小白填坑之vue3.0+vite获取环境变量的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要给大家介绍了关于vue3简单封装input组件和统一表单数据的相关资料,不管你学习哪一门编程语言,相信大家都会略化这一部分,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue3基于rem比例缩放方案,本缩放方案置于hooks中即可，文中通过示例代码介绍了vue-cli3 中使用rem布局的方法，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue收集表单数据和过滤器的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue实现简易购物车页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了Vue优化:常见会导致内存泄漏问题及优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vant 如何修改van-collapse-item右侧图标
这篇文章主要介绍了Vant 如何修改van-collapse-item右侧图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论