一、script引入百度地图路径

apk可在百度地图官网开发者模式创建仓库中自行创建

二、创建百度地图

1.设置地图大概样式

2.复制百度地图官网框架代码

实现效果预览：

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个地图</title><script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=pgDPmxNXENGjQG9fv5S2DnTu3QpOTXOw" type="text/javascript" charset="utf-8"></script><style type="text/css">  html{height:100%}    body{height:100%;margin:0px;padding:0px}    #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);var point = new BMapGL.Point(113.6648, 34.7835);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);</script></body>
</html>

三、各种功能实现

1.绘制点、线、面

打开官方文档绘制点、线、面选项

向地图中添加标注

添加点

var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   // 指定定位位置。  // 当标注显示在地图上时，其所指向的地理位置距离图标左上   // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  // 图标中央下端的尖角位置。   anchor: new BMapGL.Size(10, 25),   // 设置图片偏移。  // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  // 需要指定大图的偏移位置，此做法与css sprites技术类似。   imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
});     // 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);

监听标注事件

marker.addEventListener("click", function(){   alert("您点击了标注");
});

添加线

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 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);

实现效果图：

2.添加搜索功能

引入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>我的第一个地图</title><scripttype="text/javascript"src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=pgDPmxNXENGjQG9fv5S2DnTu3QpOTXOw"></script><script src="./jquery-3.3.1.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>

实现效果图：

JS如何实现百度地图相关推荐

（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
js简单实现百度地图雷达探测效果
实现在百度地图上雷达探测扩散效果图,如下: 可以自行扩展其他功能. 有需要实现该功能的小伙伴们下载参考:https://github.com/TreeUx/search 下载地址:https://do ...
qt百度地图html,Qt的QWebChannel和JS、HTML通信/交互驱动百度地图
Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...
java获得百度地图驾车距离_如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)...
以下是使用js代码实现百度地图计算两地距离,代码如下所示: 出发城市 name="Area"> -省份- -城市- -县- setup(document.getElement ...
百度地图测量工具（DistanceTool.js）在多个地图上使用错误问题
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
在浏览器中使用百度地图的定位服务获得经纬度
1.在使用百度地图之前,先登录百度账号,申请一个ak秘钥.申请ak访问码的地址为:http://lbsyun.baidu.com/apiconsole/key 申请一个ak用于访问百度地图API的访问 ...
【安卓学习之常见问题】百度地图卫星地图精度不够
█ [安卓学习之常见问题]百度地图卫星地图精度不够 █ 系列文章目录提示:这里是收集了和文件分享有关的文章 [安卓学习之常见问题]android路径及文件问题 [安卓学习之常见问题]文件分享–文件不 ...
百度地图api之固定标记点(标记点自己设置样式)
一.首先引入所申请的ak密钥 <script type="text/javascript" src="http://api.map.baidu.com/api?ak ...
百度地图-新手入门教程
百度地图介绍 LBS:location Bussiness Server 基本地理位置的服务开发百度地图的北斗定位,可以让开发者轻松实现安全.精准.稳定的定位功能,企业级可视化服务解决方案,实现点线 ...
百度地图实现测量面积和测量距离功能
最近在公司的项目中,需要用到百度地图的测距和测面积功能,但是在网上只找到了测量距离的api,即BMapLib.DistanceTool. 但是测面积在网上没有找到很好的资料,百度提供的DrawingM ...

JS如何实现百度地图

一、script引入百度地图路径

二、创建百度地图

1.设置地图大概样式

2.复制百度地图官网框架代码

三、各种功能实现

1.绘制点、线、面

添加点

添加线

添加面

2.添加搜索功能

JS如何实现百度地图相关推荐

最新文章

热门文章