uni-app h5使用百度地图

王志有迎宾路至府东街 發表於 2021-6-22 16:36:00

uni-app 生成h5时，默认使用的腾讯地图，且自带的map无法使用mapSearch组件。于是就有了通过web-view嵌入页面来实现。
现贴上使用百度地图获取经度和纬度的功能，供大家参考。
在static/html/map.html
 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_2e207441-905b-4917-9a98-2fdd7c899987" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_2e207441-905b-4917-9a98-2fdd7c899987" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_2e207441-905b-4917-9a98-2fdd7c899987" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<style type="text/css">
body{
 width:100%;
 margin:0px;
 background-color:#FAFAFA;margin: 0px;padding:0px;font-size: 12px;
}
div{width:95%;margin:10px auto;}
input {width:75px;margin-right:2px;}#result-list{width:100%;padding:0;margin:5px 5px;} #result-list li {padding:10px;background-color:#f1f2f4;height:80px;margin:10px 2px;width:41%;float:left;/*white-space:nowrap;*/overflow:hidden;
 }#result-list li span {display:none;}
</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0IM6czqEBhOAqmrsdfsX9VTmiDOzu8"></script>

</head>
<body>
<div style="">城市:<input type="text" id="txtCityName"> 关键字:<input type="text" id="txtTitle"><button onclick="search()">搜索</button><button onclick="closeWindow()">关闭</button></div>
<div id="content" style="display:none;">
 <div id="r-result" style="background:#fff;overflow:scroll;height: 200px; width: 100%;border:1px solid #ebeaba">
<ul id='result-list'></ul>
</div>
</div>
 <div id="allmap" style="width:100%;height:300px"></div>
 <span style="color: #ff0066">*</span>在地图上标注琴行位置时,应先选择城市,确认经度,纬度,比例文本框值的正确性方可!

<script type="text/javascript">

 var myCity = new BMap.LocalCity();

 var map = new BMap.Map("allmap");
 myCity.get(function (result) {
 console.log(result);
 jQuery("#txtCityName").val(result.name);
 map.centerAndZoom(result.center, 18);
 });
 map.enableScrollWheelZoom(true);
 /*根据用户点击获得经纬度*/
 map.addEventListener("click", function (e) {
 console.log(e);
 let addrInfo = e.point;
 // jQuery('#txtMapJing').val(addrInfo.lng);
 // jQuery('#txtMapWei').val(addrInfo.lat);


 });
 function getQuery(name) {
 // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
 let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 let r = window.location.search.substr(1).match(reg);
 console.log(r);
 if(r != null) {
 // 对参数值进行解码
 return decodeURIComponent(r[2]);
 }
 return null;
 }
 functioncloseWindow()
 {
 window.parent.postMessage({close:"true"}, "*");
 }
 function search() {
 let cityName=jQuery("#txtCityName").val();
 var local = new BMap.LocalSearch(map, {
 renderOptions: { map: map },
 pageCapacity: 30,

 onMarkersSet: function (array) {
 // console.log(array);
 let arrLength = array.length;
 str = '';
 for (i = 0; i < arrLength; i++) {
 str += '<li>标题：' + array.title + ' 地址：' + array.address;
 if (typeof array.phoneNumber != 'undefined')
 {
 str += ' 电话：' + array.phoneNumber;
 }
 str += '' + array.point.lng;
 str += ',' + array.point.lat + '</li>';
 }
 jQuery("#content").show();
 jQuery("#result-list").html(str);

 jQuery("#result-list li").bind('click', function () {
 let addrInfo = jQuery(this).find('span').text().split(',');
 window.parent.postMessage({test:{'lng':addrInfo[0],'lat':addrInfo[1]}}, "*");
 // jQuery('#txtMapJing').val(addrInfo);
 // jQuery('#txtMapWei').val(addrInfo);
 jQuery(this).css("background-color", '#eff4bc').siblings().css('background-color', '#f1f2f4');
 var point = new BMap.Point(addrInfo[0], addrInfo[1]);
 map.centerAndZoom(point, 18);

 // 创建地址解析器实例
 var myGeo = new BMap.Geocoder();
 // 将地址解析结果显示在地图上,并调整地图视野
 myGeo.getPoint("", function (point) {
 if (point) {
 map.centerAndZoom(point, 20);
 map.addOverlay(new BMap.Marker(point));
 } else {
 alert("您选择地址没有解析到结果!");
 }
 }, cityName);

 });
 }
 });
 // let Province = jQuery('#ddlProvince option:selected').text();
 // if (Province == '') { alert('请选择省'); }
 // let city = jQuery('#ddlCity option:selected').text();
 //if (city == '') { alert('请选择城市'); }
 let qh = jQuery('#txtTitle').val();
 if (qh == '') { alert('请填写琴行名称'); }

 map.centerAndZoom(cityName, 15);
 local.search(cityName+qh);
 }

</script>
</body>
</html></pre>
</div>
View Code</div>
注意：要使用百度地图功能，需要向百度申请AK，地址：https://lbsyun.baidu.com
<img src="https://img2020.cnblogs.com/blog/251562/202106/251562-20210622162415275-338026316.jpg" alt="" loading="lazy">
申请的AK
<img src="https://img2020.cnblogs.com/blog/251562/202106/251562-20210622162504632-837771236.jpg" alt="" loading="lazy">
 
需要本地测试时，请把白名单设置为*号。
在vue文件中引用
 
<div class="cnblogs_code" style="text-align: center"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_404dff02-f9ee-448a-b15f-325be7bf6dcc" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_404dff02-f9ee-448a-b15f-325be7bf6dcc" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_404dff02-f9ee-448a-b15f-325be7bf6dcc" class="cnblogs_code_hide">
<pre>mounted()
 {
 let that=this;
 window.addEventListener('message', function(e) {
 　if (typeof e.data.close!="undefined")
 {
 that.showWebView=false;
 }
 　if (typeof e.data.test!="undefined") {
 that.latitude=e.data.test.lat;
 that.longitude=e.data.test.lng;
 　　　　//alert(e.data.test.lng);
 if(confirm('是否确认选择'))
 {
 that.showWebView=false;
 }
 　　}
 }, false);</pre>
</div>
View Code</div>
 
效果：
<img src="https://img2020.cnblogs.com/blog/251562/202106/251562-20210622162848396-336513252.jpg" alt="" loading="lazy">
 通过搜索显示的数据
使用window.postMessage向父窗口传递消息，点击关闭窗口
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">functioncloseWindow()
{
window.parent.postMessage({close:"true"}, "*");
}
</pre>
</div>
　　
父窗口处理：
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">　let that=this;
　window.addEventListener('message', function(e) {
　if (typeof e.data.close!="undefined")
　{
　that.showWebView=false;
　}}, false);
</pre>
</div>
其中：that.showWebView为在webView中加上的 v-if="showWebView"　
相关资料：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
 注意：要修改web-view的样式需要在App.vue中引用样式
<div class="cnblogs_code">
<pre>iframe{height:400px !important;z-index:2000;overflow: hidden;top:50% !important}</pre>
</div>
  
来源：https://www.cnblogs.com/fogwang/p/14919184.html

頁: [1]

琼殿技术论坛's Archiver

uni-app h5使用百度地图