前言：當我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求，以百度地圖為例來為大家介紹
cdn網站詳細代碼講解：前端開發(fā)之百度地圖使用的API和實例_馮浩(grow up)的博客-CSDN博客
一、使用百度地圖接口的步驟1、首先注冊百度地圖賬號百度地圖https://lbsyun.baidu.com/
2、選擇控制臺–我的應用–創(chuàng)建應用一、html簡單案例（簡單的地圖案例）1、初始化地圖展示創(chuàng)建百度地圖代碼
<html lang="zh-CN"> <head> <meta chart="utf-8"> <title>地圖展示</title> <meta http-equiv="Content-Type" content="text/html; chart=utf-8"> <meta name="viewport" content="initial-scale=1.0, ur-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> // 創(chuàng)建Map實例 var map = new BMapGL.Map('container'); // 初始化地圖,設置中心點坐標和地圖級別 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 開啟鼠標滾輪縮放 map.enableScrollWheelZoom(true); </script>2、地圖控件
添加比例尺/縮放控件 // 創(chuàng)建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); // 創(chuàng)建點 var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915)); // 創(chuàng)建折線 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 }); // 創(chuàng)建圓 var circle = new BMapGL.Circle(point, 500, { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }); // 創(chuàng)建多邊形 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 }); // 創(chuàng)建矩形 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); // 創(chuàng)建點標記 var marker = new BMapGL.Marker(point); map.addOverlay(marker); // 創(chuàng)建信息窗口 var opts = { width: 200, height: 100, title: '故宮博物院' }; var infoWindow = new BMapGL.InfoWindow( '地址：北京市東城區(qū)王府井大街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-地點檢索服務
//左上搜索框 實現(xiàn)動態(tài)搜索 //前提： //導入地圖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); // 創(chuàng)建標注 map.addOverlay(marker); // 將標注添加到地圖中 var local = new BMapGL.LocalSearch(map, { renderOptions: { map: map } }); local.arch("景點"); $(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.arch($(this).text()); $(".tip").html(""); $("#inp").val(""); $("#inp").attr("placeholder", $(this).text()); }) }) </script>三、vue項目中使用百度地圖api1.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 tup> 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.tMapType(window.BMAP_EARTH_MAP); }) </script> <style> #container { height: 600px; width: 800px; }</style>四、Ext項目中使用百度地圖api1、在js文件中導入密鑰文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密鑰" > </script>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() //重定坐標點 tMapEvent(); //設置地圖事件 // addMapControl(); //向地圖添加控件 } //地圖事件設置函數(shù)： function tMapEvent() { map.enableDragging(); //啟用地圖拖拽事件，默認啟用(可不寫) map.enableScrollWheelZoom(true); //啟用地圖滾輪放大縮小 map.enableDoubleClickZoom(); //啟用鼠標雙擊放大，默認啟用(可不寫) map.enableKeyboard(); //啟用鍵盤上下左右鍵移動地圖 } //地圖控件添加函數(shù)： 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); } //創(chuàng)建標記點 function createMapNum() { //定義一個中心點坐標 var point = new BMap.Point(116.395645, 39.929986); //設定地圖的中心點和坐標并將地圖顯示在地圖容器中 that.map.centerAndZoom(point, 12); // 創(chuàng)建點標記 var marker = new BMap.Marker(point); that.map.addOverlay(marker); // 創(chuàng)建信息窗口 var opts = { width: 200, height: 100, title: '故宮博物院' }; var infoWindow = new BMap.InfoWindow('地址：北京市東城區(qū)王府井大街88號樂天銀泰百貨八層', opts); // 點標記添加點擊事件 marker.addEventListener('click', function () { // 開啟信息窗口 that.map.openInfoWindow(infoWindow, point); }); } initMapFun(); }, html: '<div style="border: #ccc solid 1px" id="dituContent"></div>', })五、使用百度地圖可能中遇到的問題
//解決IE沖突//在創(chuàng)建完地圖后添加代碼if (navigator.appName == "Microsoft Internet Explorer" && parInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) { $(".contact_forms_ie_tit").show(); }如果上述事件不夠可取官方查看文檔
本文發(fā)布于:2023-02-28 20:15:00，感謝您對本站的認可！
本文鏈接：http://www.newhan.cn/zhishi/a/167766548079814.html
版權聲明：本站內容均來自互聯(lián)網，僅供演示用，請勿用于商業(yè)和其他非法用途。如果侵犯了您的權益請與我們聯(lián)系，我們將在24小時內刪除。
本文word下載地址：申請百度地圖api(申請百度地圖api密鑰).doc
本文 PDF 下載地址：申請百度地圖api(申請百度地圖api密鑰).pdf
| 留言與評論（共有 0 條評論） |
