前端开发之百度地图使用的API和实例

前言
一、使用百度地图接口的步骤
- 1、首先注册百度地图账号
- 2、选择控制台--我的应用--创建应用
二、html简单案例
- 1、初始化地图
- 2、地图控件
- 3、添加和清除覆盖物
- 4、为坐标点绑定事件
- 5. Web服务API-IP定位服务
- 6.Web服务API-地点检索服务
三、vue项目中使用百度地图api
- 1.public下方的index.html中导入
- 2、vue文件
四、Ext项目中使用百度地图api
- 1、在js文件中导入密钥文件
- 2、.vm文件中
五、使用百度地图可能中遇到的问题
- 1、解决IE冲突
- 如果上述事件不够可取官方查看文档

前言

当我们遇到定位展示的时候会出现使用地图展示的需求，已百度地图为例来为大家介绍

一、使用百度地图接口的步骤

1、首先注册百度地图账号

百度地图
https://lbsyun.baidu.com/

2、选择控制台–我的应用–创建应用

二、html简单案例

1、初始化地图

 其中的您的密钥就是上面注册的ak值

 <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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script></head><body><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地图控件

  //添加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<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()}&region=北京&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文件中

创建地图展示类

/*** @class BizIPAlarySelectList* @extends AppAnalysisGridPanel* 地图展示*/Ext.define('BizIPAlarySelectList', {extend: 'Lwf.Ext.Panel',num: 0,initMap: function () {var that = thisfunction 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>',})

五、使用百度地图可能中遇到的问题

1、解决IE冲突

在创建完地图后添加代码

  if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) {$(".contact_forms_ie_tit").show();}

如果上述事件不够可取官方查看文档

前端开发之百度地图使用的API和实例相关推荐

前端vue3项目中百度地图的使用api及实例
目录一.使用百度地图的准备工作? 二.百度地图的简单Demo 三.百度地图的常用api有哪些? 1.百度地图的类型? 2.百度地图控件一.使用百度地图的准备工作? 1.先注册百度账号 --> ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
Android开发之百度地图定位
Android开发之百度地图定位一.效果图二.下载百度地图SDK 1.打开[百度地图](https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9% ...
百度地图js版api绘制几何图形覆盖物并保存数据库
百度地图js版api绘制几何图形覆盖物并保存数据库你好!相信你看到这边文章的时候,我的方案,已经满足了你的需求: 1,在html5上调用web版百度地图api,绘制多边形,我项目的是绘制小区. 2, ...
【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件...
目录概述功能如何使用参考帮助概述源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...
Android开发之百度地图定位打卡
Android开发之百度地图定位打卡一.效果图二.下载百度地图SDK 三.代码实现 1.布局文件(activity_main) 2.布局文件(activity_map) 3.在res文件夹下新建m ...
使用百度地图Web服务API查询地点的经纬度信息
使用百度地图Web服务API查询地点的经纬度信息 API地理编码服务数据结果 API地理编码服务地理编码服务(又名Geocoder)是一类Web API接口服务: 地理编码服务提供将结构化地址数 ...
python如何爬虫获取图形上点的坐标_python调用百度地图WEB服务API获取地点对应坐标值...
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...
python调用百度地图实现导航_python调用百度地图WEB服务API获取地点对应坐标值
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...

前端开发之百度地图使用的API和实例

前端开发之百度地图使用的API和实例

前言

一、使用百度地图接口的步骤

1、首先注册百度地图账号

2、选择控制台–我的应用–创建应用

二、html简单案例

1、初始化地图

2、地图控件

3、添加和清除覆盖物

4、为坐标点绑定事件

5. Web服务API-IP定位服务

6.Web服务API-地点检索服务

三、vue项目中使用百度地图api

1.public下方的index.html中导入

2、vue文件

四、Ext项目中使用百度地图api

1、在js文件中导入密钥文件

2、.vm文件中

五、使用百度地图可能中遇到的问题

1、解决IE冲突

如果上述事件不够可取官方查看文档

前端开发之百度地图使用的API和实例相关推荐

最新文章

热门文章