前言：当我们遇到定位展示的时候会出现使用地图展示的需求，以百度地图为例来为大家介绍
cdn网站详细代码讲解：前端开发之百度地图使用的API和实例_冯浩(grow up)的博客-CSDN博客
一、使用百度地图接口的步骤
1、首先注册百度地图账号
百度地图
https://lbsyun.baidu.com/
2、选择控制台–我的应用–创建应用
一、html简单案例（简单的地图案例）
1、初始化地图展示
创建百度地图代码
地图展示
2、地图控件
添加比例尺/缩放控件
// 创建Map实例
var map = new BMapGL.Map("allmap");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();
map.addControl(scaleCtrl);
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();
map.addControl(zoomCtrl); //添加3D控件
var navi3DCtrl = new BMapGL.NavigationControl3D();
map.addControl(navi3DCtrl);3、添加和清除覆盖物
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 创建点
var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
// 创建折线
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
});
// 创建圆
var circle = new BMapGL.Circle(point, 500, {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
// 创建多边形
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
});
// 创建矩形
var pStart = new BMapGL.Point(116.392214, 39.918985);
var pEnd = new BMapGL.Point(116.41478, 39.911901);
var rectangle = new BMapGL.Polygon([
new BMapGL.Point(pStart.lng, pStart.lat),
new BMapGL.Point(pEnd.lng, pStart.lat),
new BMapGL.Point(pEnd.lng, pEnd.lat),
new BMapGL.Point(pStart.lng, pEnd.lat)
], {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
// 添加覆盖物
function addOverlay() {
map.addOverlay(marker); // 增加点
map.addOverlay(polyline); // 增加折线
map.addOverlay(circle); // 增加圆
map.addOverlay(polygon); // 增加多边形
map.addOverlay(rectangle); // 增加矩形
}
// 清除覆盖物
function removeOverlay() {
map.clearOverlays();
}
addOverlay();4、为坐标点绑定事件
为坐标点添加点击事件-----点击坐标点弹出弹框
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.925);
map.centerAndZoom(point, 15);
// 创建点标记
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var opts = {
width: 200,
height: 100,
title: '故宫博物院'
};
var infoWindow = new BMapGL.InfoWindow(
'地址：北京市东城区王府井大街88号乐天银泰百货八层',
opts
);
// 点标记添加点击事件
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});5. Web服务API-IP定位服务
//需要导入jquery 借助jq跨域
//url中的ip可不填，自动获取
6.Web服务API-地点检索服务
//左上搜索框 实现动态搜索
//前提：
//导入地图api
//导入jquery
三、vue项目中使用百度地图api
1.public下方的index.html中导入
2、vue文件
This is an about page
四、Ext项目中使用百度地图api
1、在js文件中导入密钥文件
2、.vm文件中
/**
* @class BizIPAlarySelectList
* @extends Lwf.Ext.Panel
* 地图展示
*/
Ext.define('BizIPAlarySelectList', {
extend: 'Lwf.Ext.Panel',
num: 0,
initMap: function () {
var that = this
function initMapFun() {
if (that.num == 0) {
that.map = new BMap.Map("dituContent", {
minZoom: 5,
maxZoom: 20
});
that.num++
}
createMapNum() //重定坐标点
setMapEvent(); //设置地图事件
// addMapControl(); //向地图添加控件
}
//地图事件设置函数：
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(true); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl() {
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrl_sca);
}
//创建标记点
function createMapNum() {
//定义一个中心点坐标
var point = new BMap.Point(116.395645, 39.929986);
//设定地图的中心点和坐标并将地图显示在地图容器中
that.map.centerAndZoom(point, 12);
// 创建点标记
var marker = new BMap.Marker(point);
that.map.addOverlay(marker);
// 创建信息窗口
var opts = {
width: 200,
height: 100,
title: '故宫博物院'
};
var infoWindow = new BMap.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
// 开启信息窗口
that.map.openInfoWindow(infoWindow, point);
});
}
initMapFun();
},
html: '',
})五、使用百度地图可能中遇到的问题
//解决IE冲突
//在创建完地图后添加代码
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) {
$(".contact_forms_ie_tit").show();
}
本文暂时没有评论，来添加一个吧(●'◡'●)