html5如何引用百度地图api,WebApp如何调用百度地图API

一、百度地图API的应用场景和方法

百度地图接口有三种调用方式：

第一种是WEB浏览器端调用(H5)；

第二种是Android；

第三种是IOS；

附上文档地址：

第一种当你调用API时会在浏览器端打开百度地图页面(Web和WebAPP打开后样子不同)，后两种则是直接打开移动端的百度APP应用

以上三种调用方式其实都是通过调用百度地图来展示你要的导航或路径规划；如果你想在自己的应用里面嵌入地图或者类似百度地图功能，有两种方法：

第一种是利用百度javascript开发文档；

第二种使用组件化的百度地图，如果你使用VUE框架可以用 vue-baidu-map这个插件，适用于React，Angular的map组件我还没研究，直接用npm安装也行，script标签引入也可以；

不管以上那种方法，只要你想要调用百度地图API，就必须登录以下网址申请秘钥ak：

二、功能的实现

1.要改变百度地图标注ICON图标

var map =new BMap.Map(‘container’);

map.centerAndZoom(new BMap.Point(116.380797, 39.918497), 18); //其中18是地图放大的倍数

var icon = new BMap.Icon(‘pin.png’, new BMap.Size(20, 32), { //(20,30)是显示图标的范围，这个尺寸最好就是图标的大小，因为无法对图标进行缩放操作

//此处的icon路径必须是服务器上地址，不可以使用本地的图片(我试了好多次用本地都不可以)

anchor: new BMap.Size(10, 30) //偏移量

});

var mkr =new BMap.Marker(new BMap.Point(116.38075,39.918986), { //Marker是一个用来往地图上添加点标记的类。

icon: icon //Marker的构造函数的参数为Point和MarkerOptions(可选)

});

map.addOverlay(mkr);

其中 上面 anchor表示 即定位点距离图片左上角的偏移量

// 向地图添加标注

for( var i = 0;i < points.length; i++){

// 指定定位位置

offset: new BMap.Size(10, 25),

// 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置

imageOffset: new BMap.Size(0, 0 – i * 25) // 设置图片偏移

});

var point = new BMap.Point(points[i][0],points[i][1]);

// 创建标注对象并添加到地图

var marker = new BMap.Marker(point,{icon: myIcon});

map.addOverlay(marker);

2.路径规划

目前百度没有向外提供多目的地路径规划的接口，即多目的地的最优路径，现在百度API仅有两点之间的路径规划。所以这个功能目前我还没有找到实现方法。

3.关闭百度默认的POI信息点。

一开始接触地图，我都不晓得什么是POI，最后才知道是下图的这个东东

4be9fb06087c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

image.png

var map = new BMap.Map(“allmap”, {enableMapClick:false});//构造底图时，关闭底图可点功能

4.地址转码

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。

BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用WGS84坐标。

如果你是用的手机自带GPS定位，则使用WGS84坐标，而百度对外接口的坐标系为BD09坐标系，所以如果你调用的是手机GPS定位，又想让其显示在百度地图上，那么必须先将原始坐标转化成百度地图的坐标。

5.定位

由于不是正式的app形式，只能通过html5的地理定位方法去获取。html5 geolocation 特性可以实现浏览器定位，百度API对其进行了封装，代码如下：

var geolocation = new BMap.Geolocation(); //实例化浏览器定位对象。

geolocation.getCurrentPosition(function(r) {

if(this.getStatus() == BMAP_STATUS_SUCCESS) {

var mk = new BMap.Marker(r.point);

getAddress(r.point);

} else {

alert(‘failed’ + this.getStatus());

});

//获取地址信息，设置地址label

function getAddress(point) {

var gc = new BMap.Geocoder();

gc.getLocation(point, function(rs) {

console.log(point)

var addComp = rs.addressComponents;

var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址

});

//关于状态码

//BMAP_STATUS_SUCCESS

检索成功。对应数值“0”。

//BMAP_STATUS_CITY_LIST

城市列表。对应数值“1”。

//BMAP_STATUS_UNKNOWN_LOCATION

位置结果未知。对应数值“2”。

//BMAP_STATUS_UNKNOWN_ROUTE

导航结果未知。对应数值“3”。

//BMAP_STATUS_INVALID_KEY

非法密钥。对应数值“4”。

//BMAP_STATUS_INVALID_REQUEST

非法请求。对应数值“5”。

//BMAP_STATUS_PERMISSION_DENIED

没有权限。对应数值“6”。(自 1.1 新增)

//BMAP_STATUS_SERVICE_UNAVAILABLE

服务不可用。对应数值“7”。(自 1.1 新增)

//BMAP_STATUS_TIMEOUT

超时。对应数值“8”。(自 1.1 新增)

6.添加信息窗口

vue中使用采用全局注册

全局注册将一次性引入百度地图组件库的所有组件,然后在各个页面可以直接使用

import Vue from ‘vue’

import BaiduMap from ‘vue-baidu-map’

Vue.use(BaiduMap, {

ak: ‘YOUR_APP_KEY’

开合状态:{{point.angle_1 | angle_1Fil}}
电压量:{{point.battery}}V
//methods:

infoWindowClose(e) {

this.infoWindow.show = false

infoWindowOpen(e) {

this.infoWindow.show = true

JS API :下面代码为多点添加信息窗体

let map = new BMap.Map(“amap”);

let point = new BMap.Point(this.points[0].lng, this.points[0].lat);

map.centerAndZoom(point, 15);

let pointArray = new Array();

for(let i=0;i

let imgUrl = “http://*********/img/”+this.points[i].imgUrl;

let myIcon = new BMap.Icon(imgUrl, new BMap.Size(100, 100), {

//offset: new BMap.Size(10, 25), // 指定定位位置 一般只有icon图片为雪碧图时用到

// imageOffset: new BMap.Size(0, 0 – 10 * 25) // 设置图片偏移

});

let marker = new BMap.Marker(new BMap.Point(this.points[i].lng, this.points[i].lat),{icon:myIcon}); // 创建点

// 创建信息窗口对象

addClickHandler(this.points[i],marker);

map.addOverlay(marker); //增加点

pointArray[i] = new BMap.Point(this.points[i].lng, this.points[i].lat);

marker.addEventListener(“click”,attribute);

//让所有点在视野范围内

map.setViewport(pointArray);

//获取覆盖物位置

function attribute(e){

var p = e.target;

//alert(“marker的位置是” + p.getPosition().lng + “,” + p.getPosition().lat);

function addClickHandler(content,marker){

marker.addEventListener(“click”,function(e){

openInfo(content,e)}

function openInfo(content,e){

var p = e.target;

var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

var sContent =’

‘
+’

‘
+’

开合状态:’ + status + ”
+’

‘
+’

‘;
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象

map.openInfoWindow(infoWindow,point); //开启信息窗口

7.查询两点间路径并进行导航

a.原生APP则可以直接调起百度地图APP来实现;

b.WebAPP则可以调起浏览器百度API实现，

//调起百度PC或Web地图，展示”西安市”从(lat:34.264642646862,lng:108.95108518068 )”我家”到”大雁塔”的驾车路线。

其中目的地也可以用经纬度描述，类同origin;region参数也必须要有

原文链接：https://www.cnblogs.com/aaa1122js/p/16735522.html