| 前端项目中使用百度地图api，含实例 | 您所在的位置：网站首页 › 百度地图在线使用方法 › 前端项目中使用百度地图api，含实例 |
前端项目中使用百度地图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 代码如下： 替换上自己的密钥 我的第一个地图 #container { height: 600px; width: 800px; } var map = new BMapGL.Map("container");// 创建地图实例 var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标 map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别 运行结果： 可以给地图添加比例尺控件、缩放空间、城市列表控件以及开启滚轮缩放 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 = "helloworld"; 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 = `hello你好 `; 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可不填，自动获取 $(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) } }) }) 6.Web服务API-地点检索服务左上搜索框 实现动态搜索 //导入地图api //导入jquery //style #container { height: 600px; width: 800px; } .tip { position: absolute; top: 45px; z-index: 99999; background-color: rgba(0, 0, 0, .1); } 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 += `${item.name} ` }); $(".tip").html(str); } }) }) $(".tip").on("click", ".item", function () { local.search($(this).text()); $(".tip").html(""); $("#inp").val(""); $("#inp").attr("placeholder", $(this).text()); }) }) 三、vue项目中使用百度地图接口的简单方式 1.public下方的index.html中导入 2. .vue文件中 This is an about page 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); }) #container { height: 600px; width: 800px; } |
https://lbsyun.baidu.com/ 
【本文地址】
公司简介
联系我们