百度地图 前端html,前端js调用百度地图常用基本功能

最新推荐文章于 2024-08-03 16:53:18 发布
最新推荐文章于 2024-08-03 16:53:18 发布
阅读量843 收藏 1
点赞数
文章标签： 百度地图 前端html

调用百度地图前需要完成的步骤：

1.申请百度账号

2.申请密钥(AK)。

具体api文档请点击 百度地图JavaScript API 查看

点击进入上面链接后，如下图，点击获取密钥，然后点创建应用。

83e9acb5f971

图1

83e9acb5f971

里面的配置参数，我们按照描述来就好，如图，我们取名 test，应用类型选择浏览器端，然后设置白名单。点击提交 就生成了我们需要的密钥(AK)：

83e9acb5f971

图3

3.用上一步生成的密钥，我们就可以调用百度地图实现我们的地图功能了。

代码如下：

// 以下代码是本人根据以前做的项目整理出来的，纯属手写，如有不规范处还请指出。

Document

*{margin:0;padding:0;}

.map{width: 500px;height: 500px;border:1px solid #666;float:left;}

.txt{float:left;margin-left:20px;}

input{width: 200px;height: 30px;display: block;margin-bottom:10px;border:1px solid #ccc;}

window.οnlοad=function(){

var oKeyword = document.getElementById("keyword");

var oProvince = document.getElementById("province");

var oCity = document.getElementById("city");

var oAddress = document.getElementById("address");

var foo = {

//后面的操作，都是把地址信息填入这个address，所以传给后台的时候就可以直接传这个数据

address : {

province : '',

provinceCode : '0',

city : '',

cityCode : '0',

district : '',

districtCode : '0',

longitude : '',

latitude : ''

},

// 根据point来初始化地图

initMap : function(lng,lat){

var _this = this;

var map = new BMap.Map("map"); // 创建Map实例

var point = new BMap.Point(lng, lat) // 创建点坐标

map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

// 地图的一些配置项

var navigationControl = new BMap.NavigationControl({

anchor: BMAP_ANCHOR_TOP_LEFT, // 靠左上角位置

type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型

enableGeolocation: true // 启用显示定位

});

map.addControl(navigationControl);// 缩放标尺

// 添加中心小红点

var centerPoint = new BMap.Marker(point);

map.addOverlay(centerPoint);

// 当前位置写入右侧input

var myGeo = new BMap.Geocoder();

myGeo.getLocation(new BMap.Point(lng, lat),function (result) {

_this.callBack(result,'drag')

});

_this.dragMap(map,centerPoint); //添加拖拽事件

//建立一个自动完成的对象，keyword出现下拉选择

var ac = new BMap.Autocomplete({

"input" : "keyword",

"location" : map

});

ac.addEventListener("onconfirm", function(e) {

// console.log(e)

var thisValue = e.item.value;

// console.log(thisValue)

var thisProvince = thisValue.province;

var thisCity = thisValue.city;

var thisDistrict = thisValue.district;

var thisStreet = thisValue.street;

var thisStreetNumber = thisValue.streetNumber;

var thisBusiness = thisValue.business;

var thisKey = thisProvince+thisCity+thisDistrict+thisStreet+thisStreetNumber+thisBusiness;

_this.searchByKey(map,thisKey,centerPoint);

})

},

// 地图拖拽

dragMap : function(map,centerPoint){

var _this = this;

var myGeo = new BMap.Geocoder();

map.addEventListener("dragging", function showInfo() {

var cp = map.getCenter();

centerPoint.setPosition(new BMap.Point(cp.lng, cp.lat));

map.panTo(new BMap.Point(cp.lng, cp.lat));

map.centerAndZoom(centerPoint.getPosition(), map.getZoom());

});

map.addEventListener("dragend",function showInfo() {

var cp = map.getCenter();

myGeo.getLocation(new BMap.Point(cp.lng, cp.lat),function (result) {

// console.log(result)

centerPoint.setPosition(new BMap.Point(cp.lng, cp.lat));

map.panTo(new BMap.Point(cp.lng, cp.lat));

map.centerAndZoom(centerPoint.getPosition(), map.getZoom());

_this.callBack(result,'drag')

});

});

},

// 地图拖拽后 和 输入关键字后选择 的回调函数

callBack : function(result,tag){

var _this = this;

var thisAddress = result.addressComponents;

if(thisAddress.province == "新疆维吾尔自治区" || thisAddress.province == "西藏自治区"){

alert("很抱歉，新疆和西藏地区暂不支持该服务，敬请期待。");

oKeyword.value = "";

oProvince.value = "";

oCity.value = "";

oAddress.value = "";

}else{

if(tag==='drag'){

oKeyword.value = result.address;

}

oProvince.value = thisAddress.province;

oCity.value = thisAddress.city;

oAddress.value = thisAddress.district + thisAddress.street + thisAddress.streetNumber;

// console.log(result);

_this.address.province = thisAddress.province;

_this.address.city = thisAddress.city;

_this.address.district = thisAddress.district;

_this.address.longitude = result.point.lng;

_this.address.latitude = result.point.lat;

}

console.log(JSON.stringify(_this.address))

},

// 输入关键字搜索，根据关键字更新地图并获取信息

searchByKey : function(map,keyword,centerPoint){

var _this = this;

var localSearch = new BMap.LocalSearch(map);

localSearch.enableAutoViewport();

localSearch.search(keyword);

localSearch.setSearchCompleteCallback(function (searchResult) {

if(searchResult && searchResult.getPoi(0)){

var poi = searchResult.getPoi(0);

if(poi.point){

map.centerAndZoom(poi.point,15);

centerPoint.setPosition(poi.point);

var myGeo = new BMap.Geocoder();

myGeo.getLocation(poi.point, function(result){

_this.callBack(result)

});

}

}

})

},

// 一般初始化地图，设置北京天安门

init : function(){

_this.initMap(116.404,39.915)

},

// 初始化当前城市

initLocalCity : function(){

var _this = this;

var map = new BMap.Map("map");

var myCity = new BMap.LocalCity();

myCity.get(function(result){

console.log(result);

// var point = result.center;

var lng = result.center.lng;

var lat = result.center.lat;

_this.initMap(lng,lat)

});

},

// 初始化当前位置

initLocalPoint : function(){

var _this = this;

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var lng = position.coords.longitude;

var lat = position.coords.latitude;

// console.log(lng+':'+lat);

var gpsPoint = new BMap.Point(lng, lat);

// 坐标转成百度需要的坐标，并初始化地图

// gpsPoint：转换前坐标，第二个参数为转换方法，0表示gps坐标转换成百度坐标，callback回调函数，参数为新坐标点

BMap.Convertor.translate(gpsPoint, 0, function(data){

_this.initMap(data.lng,data.lat);

})

})

} else {

alert("Your browser does not support Geolocation!");

}

}

}

// foo.init(); //以北京初始化地图

foo.initLocalCity(); //以当前城市初始化地图

// foo.initLocalPoint(); //以当前坐标初始化地图

// 输入关键字的时候，清空input里面的城市信息

oKeyword.οninput=function(){

oProvince.value = "";

oCity.value = "";

oAddress.value = "";

}

}

效果图：

83e9acb5f971

图4

上面代码每块注释都有，我就不分成一块一块说了，直接拷贝过去是可以运行的。下面笔者说下引入的两个js：

第一个是百度地图必须引入的js，后面的ak就是我们刚刚创建应用的密钥。

第二个js的功能是：当我们想 以当前位置初始化 地图的时候，我们用到了 getCurrentPosition，但是用 getCurrentPosition获取到的坐标是 GPS 经纬度坐标，而百度地图的坐标是经过特殊转换的，所以，在获取定位坐标和初始化地图之间需要进行一步坐标转换工作，该转换方法百度API里面已经提供了，转换一个点或者批量装换的方法均有提供：

单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js

批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js

所以这里我们引入了前者。

(但是笔者发现，用getCurrentPosition这个方法的时候，体验不是很好，初始化页面的时候地图加载很慢。笔者正在寻找更好的办法，后续再更新！)

马福报
关注
前端对 “百度地图“ 的应用入门
Lin_25937的博客
10-31 1212
前端入门，必须了解的百度地图知识
百度地图 demo 在html中显示 在jsp中不显示
weixin_34018202的博客
05-18 231
百度地图demo 在线演示如下： http://demo.yourtion.com/BaiduMap/mapSearch_getLonlet.html 源码如下： https://github.com/yourtion/BlogCodes/blob/master/baidu-maps-search-get-lonlat.html 新建一个 .h...
纯JS百度地图API应用，调用百度地图
最新发布
walian12138的博客
08-03 2239
纯JS百度地图API应用，调用百度地图，无需后端代码，纯js，申请百度地图开放平台应用，就可以快速在项目中部署百度地图
百度地图api 常用 例子
热门推荐
萝卜的专栏
08-25 3万+
功能一：获取map地图窗口的可视区域： var map = new BMap.Map("allmap");            // 创建Map实例 map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);  //初始化时，即可设置中心点和地图缩放级别。 var bs = map.getBounds();   //获取可视区域 var
百度地图html实例,百度地图开发实例文章（一）
weixin_39642981的博客
06-15 477
一 前言这是百度地图javascript开发系列文章的第一篇，主要讲如何使用百度地图，介绍了如何通过官方给出的demo和开发文档来在百度地图上面做开发，最后我们将通过一个例子成功运行代码。系列文章对百度第三方库的引用方式都是嵌入script标签的形式，对于vue-BMap等组件方式的使用不作为参考，但是方法实例是基本相同的。二 正文1.百度地图使用介绍百度地图 javascriptAPI使用百度地...
前端调用高德地图 百度地图
兔老大的胡萝卜
02-05 689
这边是vue得 先在public下得index.html加上请求得js 根据搜索模糊查询，然后自己点击获取精确经纬度。 高德 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=95ed02329c3cf68ae02a62f71a00f899&plugin=AMap.Autocomplete,AMap.PlaceSearch"></scri
带有定位当前位置的百度地图前端web api实例代码
11-23
`<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>`引入jQuery以简化DOM操作，`<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>`引入百度地图API，这是...
PHP实现调用百度地图的功能1
08-08
在本文中，我们将探讨如何使用PHP来调用和集成百度地图JavaScript API，以在网站上构建功能丰富的地图应用。百度地图API提供了一种方便的方式来在网页中嵌入地图，支持PC和移动端，同时兼容HTML5特性。 首先，我们...
Html5如何唤起百度地图App的方法
12-13
获取到的位置信息将用于构建查询参数，以便在调用百度地图App或Web端导航时提供起点坐标。 总结来说，实现HTML5唤起百度地图App的关键在于正确构造URI Scheme，并结合设备状态判断来确保导航功能的正常运行。在混合...
HTML调用百度地图.rar
09-27
在这个案例中，HTML文件（地图.html）很可能包含了内联JavaScript代码或者引用了外部JS文件，这些代码会调用百度地图的JavaScript API。JavaScript允许我们在网页中动态加载和操作内容，包括调用外部服务，如百度...
QWebEngineView之百度地图：内嵌本地HTML及js数据交互
03-31
综上所述，通过结合QWebEngineView、HTML、JavaScript和百度地图API，我们可以构建一个功能丰富的Qt应用，实现本地地图展示和数据交互。这种技术不仅限于百度地图，也可以应用于其他Web服务和地图API，为用户提供...
4个Web前端经典实用绝对值得学习收藏的地图实现模板（二）
08-04
在线效果：http://ynif.v099.10000net.cn/demo/ditu/2/ditu/index.html
【高德地图】页面使用高德地图展示
初叙
09-16 3674
（1）引入高德的url，需要提前申请key。 （2）在页面中写一个div，起一个id。 （3）创建一个map对象，用之前的id。 var map= new AMap.Map('id',{ center:[111,111],//中心位置坐标 zoom:15//地图缩放 }); 这几步就可以显示出地图，随后可以创建marker、title等添加在地图上。 给map添加一个marker： map.add(marker);//将创建好的marker放到地图上面 marker:
前端控件宝典：UI组件的完整指南(41)——调用百度地图【源码在文末并附解释】
m0_63324772的博客
09-17 340
前端控件宝典：UI组件的完整指南(41)——调用百度地图【源码在文末并附解释】
js 百度地图选择某个位置（选点），获取经纬度信息。
PrimaryColor
05-11 1735
效果图： ak获取地址，百度开放平台： https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
html页面调用高德地图,html前端使用高德地图入门教程
weixin_39972777的博客
06-04 2542
文章目录开始准备工作注册Key前期页面上的准备插件使用插件使用步骤引入插件定位自定义地图显示位置和缩放级别添加实时路况图层获取定位信息(需要使用插件)浏览器定位IP定位获取当前城市信息覆盖物添加覆盖物获取覆盖物覆盖物的操作图层设置图层获取图层移除图层3D地图未完待续...开始准备工作注册Key如果开发者账号包括Key已经有了，请忽略此步骤首先，注册开发者账号，成为高德开放平台开发者登陆之后，在进入...
html百度地图app,uniapp H5 百度地图(示例代码)
weixin_36111677的博客
06-22 1277
uniapp跳转内部html使用webview1、首先在根目录创建hybrid文件夹,创建html子文件夹2、创建包含webview的vue文件，在pages.json内写入路径文件中包uniapp如何与html传值核心html中可以使用uniapp api需使用 document.addEventListener(‘UniAppJSBridgeReady‘, function() {u...
Vue.js百度地图标注与导航功能实现教程
本教程旨在向前端开发者介绍如何在使用Vue.js框架的Web项目中集成百度地图API，实现地图的基本功能如地图标注、导航、定位及路线规划等。通过本教程，读者将能够理解和掌握如何通过百度地图提供的JavaScript API来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值