系统定制开发前端项目中使用百度地图api，含实例

前言

系统定制开发项目中加入地图是很常见的需求，系统定制开发今天以百度地图为例，系统定制开发总结一下引入地图的方法与实例

一、系统定制开发使用百度地图接口的步骤

1.系统定制开发注册百度地图的系统定制开发开发者帐号👇

2.控制台-应用管理-我的应用

创建相应的项目，拿到自己的密钥--访问应用（AK）

 3.参考开发文档进行开发即可

二、简单例子

1.第一个地图

代码如下： 替换上自己的密钥

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <script type="text/javascript"
  9.         src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
  10.     <title>我的第一个地图</title>
  11.     <style type="text/css">
  12.         #container {
  13.             height: 600px;
  14.             width: 800px;
  15.         }
  16.     </style>
  17. </head>
  18.  
  19. <body>
  20.     <div id="container"></div>
  21. </body>
  22. <script>
  23.     var map = new BMapGL.Map("container");// 创建地图实例 
  24.     var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标 
  25.     map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别 
  26. </script>
  27.  
  28. </html>

 运行结果：

2.控件

可以给地图添加比例尺控件、缩放空间、城市列表控件以及开启滚轮缩放

  1.     map.enableScrollWheelZoom(true); //滚轮缩放
  2.     var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  3.     map.addControl(scaleCtrl);
  4.     var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  5.     map.addControl(zoomCtrl);
  6.     var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
  7.     map.addControl(cityCtrl);

3.静态/动态添加点圈线面

 点

  1.     //静态添加
  2.     var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标
  3.     var marker = new BMapGL.Marker(point); // 创建标注   
  4.     map.addOverlay(marker); // 将标注添加到地图中
  5.  
  6.     //动态添加
  7.     map.addEventListener("click", e => {
  8.         var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
  9.         var m = new BMapGL.Marker(p);
  10.         map.addOverlay(m);
  11.     })

圈

 BMapGL.Circle(圆心位置,半径，圆的样式)

  1.     var circle = new BMapGL.Circle(point, 500, {
  2.         strokeColor: "blue",
  3.         strokeWeight: 2,
  4.         strokeOpacity: 0.5
  5.     });
  6.     map.addOverlay(circle);

 线

动态添加线是要借助双击事件，单击选点，双击划线。

BMapGL.Polyline(端点数组, 线的样式); 第一个参数为线的端点组成的数字，第二个参数是线的样式；第二个参数选填，不传为默认样式。

  1.     //静态添加
  2.     var polyline = new BMapGL.Polyline([
  3. 		    new BMapGL.Point(116.399, 39.910),
  4. 		    new BMapGL.Point(116.405, 39.920),
  5. 		    new BMapGL.Point(116.425, 39.900)
  6. 	    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
  7.     map.addOverlay(polyline);
  8.  
  9.     //动态添加
  10.     var lineArr = [];
  11.     map.addEventListener("click", e => {
  12.         var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
  13.         lineArr.push(p);
  14.         var m = new BMapGL.Marker(p);
  15.         map.addOverlay(m);
  16.     })
  17.     map.addEventListener("dblclick", () => {
  18.         var polyline = new BMapGL.Polyline(lineArr, {
  19.             strokeColor: "blue",
  20.             strokeWeight: 2,
  21.             strokeOpacity: 0.5
  22.         });
  23.         map.addOverlay(polyline);
  24.         lineArr = [];
  25.  
  26.     })

面

 BMapGL.Polygon(端点数组, 面的样式); 同上线的方法。

若只想在画面上留下线/面，不想要选点，则可以参考下方代码中last的相关操作，借助map.removeOverlay()方法移除选点。

  1.     //静态加面
  2.     var polygon = new BMapGL.Polygon([
  3.         new BMapGL.Point(116.387112, 39.920977),
  4.         new BMapGL.Point(116.385243, 39.913063),
  5.         new BMapGL.Point(116.394226, 39.917988),
  6.         new BMapGL.Point(116.401772, 39.921364),
  7.         new BMapGL.Point(116.41248, 39.927893)
  8.     ], {
  9.         strokeColor: "blue",
  10.         strokeWeight: 2,
  11.         strokeOpacity: 0.5
  12.     });
  13.     map.addOverlay(polygon);
  14.  
  15.     //动态加面
  16.     var lineArr = [];
  17.     var last = null;
  18.     map.addEventListener("click", e => {
  19.         last ? map.removeOverlay(last) : "";//移除当前选的最后一个点
  20.         var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
  21.         lineArr.push(p);
  22.         var m = new BMapGL.Marker(p);
  23.         last = m;
  24.         map.addOverlay(m);
  25.     })
  26.     map.addEventListener("dblclick", () => {
  27.         map.removeOverlay(last);
  28.         var polygon = new BMapGL.Polygon(lineArr, {
  29.             strokeColor: "blue",
  30.             strokeWeight: 2,
  31.             strokeOpacity: 0.5,
  32.             fillColor: "blue",
  33.         })
  34.         map.addOverlay(polygon);
  35.         lineArr = [];
  36.  
  37.     })

 4.文字标注、信息窗口

 文字标注：可以写html标签

  1.     var content = "hello<b>world</b>";
  2.     var label = new BMapGL.Label(content, { // 创建文本标注
  3.         position: point, // 设置标注的地理位置
  4.         offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
  5.     })
  6.     map.addOverlay(label); // 将标注添加到地图中

信息窗口

内容同样可以写html标签，可以通过加事件来控制点击选点时打开信息窗口

  1.     var opts = {
  2.         width: 250, // 信息窗口宽度
  3.         height: 100, // 信息窗口高度
  4.         title: "标题" // 信息窗口标题
  5.     }
  6.     var content = `<h1>hello</h1><p style="color:blue">你好</p>`;
  7.     var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
  8.     //map.openInfoWindow(infoWindow, point); // 打开信息窗口
  9.  
  10.     //单击打开
  11.     marker.addEventListener("click", e => {
  12.         map.openInfoWindow(infoWindow, point); // 打开信息窗口
  13.     })

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

需要导入jquery 借助jq跨域

url中的ip可不填，自动获取

  1. <body>
  2.     <div class="address"></div>
  3. </body>
  4. <script>
  5.     $(function () {
  6.         $.ajax({
  7.             url: "http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll",
  8.             dataType: "jsonp",
  9.             success: function (res) {
  10.                 console.log(res);
  11.                 $(".address").html(res.content.address)
  12.             }
  13.         })
  14.     })
  15. </script>

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

 左上搜索框 实现动态搜索

  1. //导入地图api
  2. //导入jquery
  3.  
  4. //style
  5.     <style type="text/css">
  6.         #container {
  7.             height: 600px;
  8.             width: 800px;
  9.         }
  10.  
  11.         .tip {
  12.             position: absolute;
  13.             top: 45px;
  14.             z-index: 99999;
  15.             background-color: rgba(0, 0, 0, .1);
  16.         }
  17.     </style>
  18.  
  19. <body>
  20.     <input type="text" id="inp">
  21.     <div class="tip"></div>
  22.     <div id="container"></div>
  23. </body>
  24. <script>
  25.     var map = new BMapGL.Map("container");
  26.     var point = new BMapGL.Point(113.6648, 34.7835);
  27.     map.centerAndZoom(point, 17);
  28.     map.enableScrollWheelZoom(true); //滚轮缩放
  29.  
  30.     //添加点
  31.     var marker = new BMapGL.Marker(point); // 创建标注   
  32.     map.addOverlay(marker); // 将标注添加到地图中
  33.  
  34.     var local = new BMapGL.LocalSearch(map, {
  35.         renderOptions: {
  36.             map: map
  37.         }
  38.     });
  39.     local.search("景点");
  40.     $(function () {
  41.         $("#inp").on("input", function () {
  42.             // console.log($("#inp").val());
  43.             $.ajax({
  44.                 url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=北京&city_limit=true&output=json&ak=您的ak`,
  45.                 dataType: "jsonp",
  46.                 success: function (res) {
  47.                     console.log(res.result);
  48.                     var str = "";
  49.                     res.result.forEach(item => {
  50.                         str += `<p class="item">${item.name}</p>`
  51.                     });
  52.                     $(".tip").html(str);
  53.                 }
  54.             })
  55.         })
  56.         $(".tip").on("click", ".item", function () {
  57.             local.search($(this).text());
  58.             $(".tip").html("");
  59.             $("#inp").val("");
  60.             $("#inp").attr("placeholder", $(this).text());
  61.         })
  62.     })
  63. </script>

 三、vue项目中使用百度地图接口的简单方式

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

  1. <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
  2. </script>

 2. .vue文件中

  1. <template>
  2.   <div class="about">
  3.     <h1>This is an about page</h1>
  4.     <div id="container" ref="dom"></div>
  5.   </div>
  6. </template>
  7. <script setup>
  8. import { ref, onMounted } from 'vue'
  9. const dom = ref();
  10. let map;
  11. onMounted(() => {
  12.   map = new window.BMapGL.Map(dom.value);
  13.   var point = new window.BMapGL.Point(116.404, 39.915);
  14.   map.centerAndZoom(point, 15);
  15.   map.enableScrollWheelZoom(true);
  16.   map.setMapType(window.BMAP_EARTH_MAP);
  17. })
  18. </script>
  19. <style>
  20. #container {
  21.   height: 600px;
  22.   width: 800px;
  23. }
  24. </style>
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发