一.简洁版百度地图

1.设置容器样式

在我们创建好的html文件中写好自己想设置地图的宽高

<style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 600px;width: 800px;}</style>

2.引入百度地图api文件

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

3.创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<div id="container"></div>

4.创建地图实例

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

5.完整代码及效果


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

效果

二.百度地图添加点线面

在原来的百度地图基础上添加内容

<!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"><title>map</title><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script><style type="text/css">#container {height: 600px;width: 800px;}/*容器地图的宽高  */</style>
</head><body><div id="container"></div><!-- 存放地图的容器 --><script type="text/javascript">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 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)// 多边线 strokeColor颜色  strokeWeight线粗细 strokeOpacity 线的透明度        // var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});// 显示线// map.addOverlay(polyline);var polygon = new BMapGL.Polygon(lineArr, {strokeColor: "blue",strokeWeight: 2,strokeOpacity: 0.5,fillColor: "red"})map.addOverlay(polygon);// 清空数组lineArr = [];})// 地图控件var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);</script>
</body></html>

三.地图完善，添加地图搜索功能

添加百度地图搜索功能就需要用到我们的jQuery了。

我们把我们的jQuery.js放在我们创建好的文件夹中

在html中通过script标签引入我们的jQuery文件

<!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" /><title>Docment</title><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script><script src="./jq.js"></script><style type="text/css">#container {height: 600px;width: 800px;}/*容器地图的宽高  *//* tip定位 */.tip {position: absolute;top: 35px;z-index: 10000;background-color: rgba(255, 255, 255, .7);}</style>
</head><body><input type="text" id="inp"><div class="tip"></div><div id="container"></div><!-- 存放地图的容器 --><script type="text/javascript">var map = new BMapGL.Map("container");// 创建地图实例var point = new BMapGL.Point(113.6648, 34.7835);// 创建点坐标map.centerAndZoom(point, 17);// 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放//   创建一个本地搜索var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map},});//   local.search("景点");//当输入框inp 发送动作时候 发送ajax请求到百度 返回键$(function() {$("#inp").on("input", function() {//  输出文本框的的内容//   console.log($("#inp").val())// 发ajax请求到建议$.ajax({url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=郑州&city_limit=true&output=json&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,dataType: "jsonp",success: function(res) {console.log(res.result);// 把res.result遍历成dom节点var str = "";res.result.forEach(item => {str += `<p class="item">${item.name}</p>`})// 放入到tip div中$(".tip").html(str);}})})//   给tip添加单击事件 执行搜索//  用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制 确定具体按个元素被单击$(".tip").on("click", ".item", function() {// 获取当前单击item的文本并进行搜索local.search($(this).text());// 清空tip$(".tip").html("");// 清空输入框$("#inp").val("");})})</script>
</body></html>

简单实现一下百度地图相关推荐

安卓开发——在应用中简单调用Android百度地图API SDK
目录需求展示效果展示: 申请百度地图API密钥配置ANDROID STUDIO 编写项目代码运行项目需求展示利用百度地图API定位到当前所在位置,并显示所在的经纬度和地址信息. 效果展示: ...
vue3中简单的使用百度地图
1.申请百度开发者账号百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口,包括JavaScript.iOS.Andriod.静态地 ...
android百度地图更换定位图标,android百度地图定位，改变MyLocationOverlay默认图标（原始为蓝色点）（两种方法）...
开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...
php开发地图导航,百度地图API使用方法详解
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: body, html,#allmap {width: 100%;height: ...
入门百度地图 JavaScript API
注册先申请百度账号,创建地图应用生成 AK.百度地图平台注意应用类型选择浏览器端. 白名单输入*号,所有地址都可以访问. 载入地图在页面使用script标签引入 <script src= ...
Informerd详解（2）与C#百度地图定位显示项目学习
文章目录摘要一.Informer代码部分(2) 1.1 Deconder模块代码 1.2 model.py部分源码 1.3 训练与预测阶段 1.4 小结二. C# 调用百度地图API 的Demo ...
Android studio 百度地图开发（5）查询周边服务（加油站）
Android studio 百度地图开发(5)查询周边服务(加油站) email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是An ...
人工智能+大数据百度地图助力智慧城市与智慧交通建设
10月13日,由中国人工智能学会主办.百度地图协办的第七届中国智能产业高峰论坛在广东佛山召开,百度地图作为代表企业应邀出席,并获得人工智能学会颁发的"最佳合作伙伴奖".在智能交通专 ...
android百度地图定位，改变MyLocationOverlay默认图标（原始为蓝色点）（两种方法）
开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...

简单实现一下百度地图

一.简洁版百度地图

二.百度地图添加点线面

简单实现一下百度地图相关推荐

最新文章

热门文章

简单实现一下百度地图

一.简洁版百度地图

二.百度地图添加点 线 面

简单实现一下百度地图相关推荐

最新文章

热门文章

二.百度地图添加点线面