前言：当我们遇到定位展示的时候会出现使用地图展示的需求，以百度地图为例来为大家介绍
一、使用百度地图接口的步骤
1、首先注册百度地图账号
百度地图
https://lbsyun.baidu.com/
2、选择控制台–我的应用–创建应用
一、html简单案例（简单的地图案例）
1、初始化地图展示
创建百度地图代码
<html lang="zh-CN"> <head> <meta charset="utf-8"> <title>地图展示</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style> body, html, #container { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } </style> <script src=https://news.xinpinbuyi.com/skin/default/image/nopic.gif <div id="container"></div> </body> </html> <script> // 创建Map实例 var map = new BMapGL.Map('container'); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); </script>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可不填，自动获取<body> <div class="address"></div> </body> <script> $(function () { $.ajax({ url: "http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll", dataType: "jsonp", success: function (res) { console.log(res); $(".address").html(res.content.address) } }) }) </script>6.Web服务API-地点检索服务
//左上搜索框 实现动态搜索 //前提： //导入地图api //导入jquery<style type="text/css"> #container { height: 600px; width: 800px; } .tip { position: absolute; top: 45px; z-index: 99999; background-color: rgba(0, 0, 0, .1); } </style> <body> <input type="text" id="inp"> <div class="tip"></div> <div id="container"></div> </body> <script> 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 local = new BMapGL.LocalSearch(map, { renderOptions: { map: map } }); local.search("景点"); $(function () { $("#inp").on("input", function () { // console.log($("#inp").val()); $.ajax({ url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}®ion=北京&city_limit=true&output=json&ak=您的ak`, dataType: "jsonp", success: function (res) { console.log(res.result); var str = ""; res.result.forEach(item => { str += `<p class="item">${item.name}</p>` }); $(".tip").html(str); } }) }) $(".tip").on("click", ".item", function () { local.search($(this).text()); $(".tip").html(""); $("#inp").val(""); $("#inp").attr("placeholder", $(this).text()); }) }) </script>三、vue项目中使用百度地图api
1.public下方的index.html中导入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥" > </script>2、vue文件
<template> <div class="about"> <h1>This is an about page</h1> <div id="container" ref="dom"></div> </div></template><script setup> import { ref, onMounted } from 'vue' const dom = ref(); let map; onMounted(() => { map = new window.BMapGL.Map(dom.value); var point = new window.BMapGL.Point(116.404, 39.915); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); map.setMapType(window.BMAP_EARTH_MAP); }) </script> <style> #container { height: 600px; width: 800px; }</style>四、Ext项目中使用百度地图api
1、在js文件中导入密钥文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥" > </script>2、.vm文件中
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: '<div style="border: #ccc solid 1px" id="dituContent"></div>', })五、使用百度地图可能中遇到的问题
//解决IE冲突//在创建完地图后添加代码if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) { $(".contact_forms_ie_tit").show(); }
