前端项目中如何使用百度地图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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了uni-popup手撸了一个菜鸟上门取件时间选择器，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了vue+elementUI面包屑组件封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在前端开发中,我们时常需要处理文件上传和下载的功能,本文主要和大家分享一下如何使用Vue3和JSZip库在浏览器端实现zip文件压缩,需要的可以参考下2024-05-05
这篇文章主要为大家详细介绍了在vue2中如何处理xml格式的数据,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2024-03-03
这篇文章主要介绍了vue二选一tab栏切换新做法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最近用vue做了两个项目，都需要实现全选反选的功能，所以想着记录下分享给大家，方便自己或者有需要的朋友们参考讲学习，所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习学习。2017-01-01
这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果,之前正在进行的请求变得无关紧要,在这种情况下,您可以利用 Axios 拦截器,本文给大家介绍了如何使用Axios拦截器中止Vue请求,需要的朋友可以参考下2023-11-11
在vue中，有时候你需要对data中的数据进行处理，或者对抓取的数据进行处理之后再挂载呈现到标签中，这时候你就需要计算属性了，当然看到这里你可能还是不了解那下面我举几个实例并附代码解释2023-02-02
这篇文章主要介绍了vue-cli3 热更新配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论