devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp中通过webview实现百度地图Javascript Api 定位、路线规划、标记、导航_web实现地图导航

作者：我家小花儿 | 2024-05-28 21:54:56

赞

踩

web实现地图导航

1.在百度地图开放平台 控制台新建应用，应用类型为 浏览器端，生成AK

2.实现 标记当前位置,点击获取附近数据并标记 Marker ,地点检索，数据传输到uniapp。配有详细注释，效果如下图：

代码如下：

  1. <template>
  2.   <view class="map">
  3.     <web-view src="/static/baidu-map/baidu-map.html" @message="getData"></web-view>
  4.   </view>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     data() {
  10.       return {
  11.  
  12.       }
  13.     },
  14.     methods: {
  15.       getData(event) {
  16.         let data = event.detail.data;
  17.         uni.setStorageSync('mapData',data)
  18.         uni.navigateBack()
  19.       }
  20.     }
  21.   }
  22. </script>
  23.  
  24. <style>
  25.  
  26. </style>

在static文件下创建baidu-map.html文件

baidu-map.html代码如下（把ak换为你申请的ak就可以直接用）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body,html {width: 100%;height: 100%; margin: 0;font-family: "微软雅黑";}
  8.         #allmap {height: 500px; width: 100%;overflow: hidden;}
  9.         #result {height: calc(100% - 610px);width: 100%;font-size: 12px;}
  10.         #resultText { height: 70px;font-size: 18px;padding: 6px;}
  11.         #r-result {height: 40px;width: 100%;display: flex;align-items: center;justify-content: center;
  12.             border-bottom: #A9A9A9 1px solid;margin-bottom: 2px;margin-top: 3px;}
  13.         .btn {width: 100px;height: 34px;border: 1px solid #999;border-radius: 5px;margin: 0 auto;
  14.             font-size: 18px;text-align: center;line-height: 34px;color: #333;background: #E8E7E3;}
  15.     </style>
  16.     <!-- 引入百度地图api 携带 AK -->
  17.     <script type="text/javascript"
  18.         src="http://api.map.baidu.com/api?v=2.0&ak=你申请的百度ak"></script>
  19.         <!-- 引入搜索功能 -->
  20.     <script type="text/javascript"
  21.         src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
  22.     <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
  23.     <!-- 引入 uni-app 的 SDK -->
  24.     <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  25.     <title>选择地址</title>
  26. </head>
  27.  
  28. <body>
  29.     <!-- 顶部搜索栏 -->
  30.     <div id="search">
  31.         <div id="r-result"><input type="text" id="suggestId" size="20" placeholder="位置搜索" value="百度"
  32.                 style="width:100%;height:40px;" /></div>
  33.         <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
  34.     </div>
  35.     <!-- 地图 -->
  36.     <div id="allmap"></div>
  37.     <!-- 选中的位置回显 -->
  38.     <div id="result">
  39.         <div id="resultText"></div>
  40.         <div class="btn">确定地点</div>
  41.     </div>
  42.  
  43.     <script type="text/javascript">
  44.       document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"><\/script>');
  45.         var map = new BMap.Map('allmap');
  46.         var poi = new BMap.Point(116.307852, 40.057031); //罗马的坐标
  47.  
  48.         var addressPost; //存储附近信息数据
  49.         var CURRENT_LNG; //记录坐标
  50.         var CURRENT_LAT; //记录坐标
  51.         var lng, lat; //记录坐标
  52.  
  53.         map.centerAndZoom(poi, 18); //设置地图中心点 和 缩放等级
  54.         map.enableScrollWheelZoom();//开启鼠标滚轮
  55.  
  56.         function G(id) {
  57.             return document.getElementById(id);
  58.         }
  59.         //获取当前位置附近地址信息 --- geoc.getLocation
  60.         var geoc = new BMap.Geocoder();
  61.         var getCurrentLocation = function (lg, lt) {
  62.             //geoc.getLocation 获取到 坐标 以及 包含附近地址信息的数组
  63.             geoc.getLocation(new BMap.Point(lg, lt), function (rs) {
  64.                 //取数组第一个地址信息为选中的位置，也可现为地址列表
  65.                 var nearbyAddeessArr = rs.surroundingPois[0];
  66.                 document.getElementById('resultText').innerText = '当前位置 ：' + nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
  67.                 addressPost = nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
  68.                 CURRENT_LNG = lg;
  69.                 CURRENT_LAT = lt;
  70.             });
  71.         }
  72.  
  73.  
  74.         //通过浏览器获取当前定位的坐标
  75.         var geolocation = new BMap.Geolocation();
  76.         geolocation.getCurrentPosition(function (r) {
  77.             if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  78.                 var mk = new BMap.Marker(r.point);
  79.                 map.addOverlay(mk);
  80.                 map.panTo(r.point);
  81.                 lng = r.point.lng
  82.                 lat = r.point.lat
  83.                 getCurrentLocation(lng, lat)
  84.             }
  85.             else {
  86.                 alert('failed' + this.getStatus());
  87.             }
  88.         }, { enableHighAccuracy: true })
  89.  
  90.          //给地图添加点击事件 标记 marker
  91.         map.addEventListener("touchstart", function (e) {
  92.             map.clearOverlays();//清除地图上所有覆盖物 marker
  93.             //获取坐标
  94.             var lng = e.point.lng;
  95.             var lat = e.point.lat;
  96.  
  97.             //创建marker标注位置
  98.             var pt = new BMap.Point(lng, lat);
  99.             //new BMap.Icon("本地marker图标路径",图标的尺寸,{marker偏移量,窗口的偏移量})
  100.             var myIcon = new BMap.Icon("https://mapopen-website-wiki.cdn.bcebos.com/markers.png", new BMap.Size(19, 25), {
  101.                     anchor: new BMap.Size(10, 25),
  102.                     imageOffset: new BMap.Size(0, 0 - 12 * 25)
  103.                 });
  104.             var marker2 = new BMap.Marker(pt, { icon: myIcon });  // 创建标注实例
  105.             map.addOverlay(marker2); //将标注添加到地图中
  106.             getCurrentLocation(lng, lat)
  107.         });
  108.  
  109.         // 以下是地点检索功能
  110.  
  111.         //创建一个search实例
  112.         var ac = new BMap.Autocomplete(
  113.             {
  114.                 "input": "suggestId",
  115.                 "location": map
  116.             });
  117.  
  118.  
  119.         var myValue;//存储地址检索结果
  120.         ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
  121.             var _value = e.item.value;
  122.             myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  123.             G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
  124.             setPlace();
  125.         });
  126.  
  127.         // 地图移动到检索的位置，并且标记
  128.         function setPlace() {
  129.             map.clearOverlays();    //清除地图上所有覆盖物
  130.             function myFun() {
  131.                 var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
  132.                 map.centerAndZoom(pp, 18);
  133.                 map.addOverlay(new BMap.Marker(pp));    //添加标注
  134.                 getCurrentLocation(pp.lng, pp.lat)
  135.             }
  136.             var local = new BMap.LocalSearch(map, { //智能搜索
  137.                 onSearchComplete: myFun
  138.             });
  139.             local.search(myValue);
  140.         }
  141.  
  142.         //确定地址 将数据传输到 uniapp 的 webview内
  143.         document.addEventListener('UniAppJSBridgeReady', function () {
  144.             //uniapp 挂载完毕，在内部可以使用uniapp 部分 api,具体看 官方文档 webview
  145.             document.querySelector('.btn').addEventListener('touchstart', function () {
  146.                 uni.postMessage({
  147.                     data: {
  148.                         addressPost,
  149.                         CURRENT_LNG,
  150.                         CURRENT_LAT
  151.                     }
  152.                 });
  153.             })
  154.  
  155.         });
  156.  
  157.     </script>
  158. </body>
  159.  
  160. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/639415
推荐阅读