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

前言

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

二、简单例子

1.第一个地图

2.控件

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

4.文字标注、信息窗口

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

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

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

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

2. .vue文件中

前言

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

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

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

百度地图/

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

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

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

百度地图 Web开发 JavaScript API /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./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./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./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./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>