uni-app 生成h5時，默認使用的騰訊地圖，且自帶的map無法使用mapSearch組件。於是就有了通過web-view嵌入頁面來實現。
現貼上使用百度地圖獲取經度和緯度的功能，供大家參考。
在static/html/map.html
<!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> <!--地圖標注Js文件--> <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; } function closeWindow() { 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[0]); let arrLength = array.length; str = ''; for (i = 0; i < arrLength; i++) { str += '<li>標題：' + array[i].title + '<br/>地址：' + array[i].address; if (typeof array[i].phoneNumber != 'undefined') { str += '<br/>電話：' + array[i].phoneNumber; } str += '</br><span>' + array[i].point.lng; str += ',' + array[i].point.lat + '</span></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[0]); // jQuery('#txtMapWei').val(addrInfo[1]); 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>
注意：要使用百度地圖功能，需要向百度申請AK，地址：https://lbsyun.baidu.com
申請的AK
需要本地測試時，請把白名單設置為*號。
在vue文件中引用
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);
效果：
通過搜索顯示的數據
使用window.postMessage向父窗口傳遞消息，點擊關閉窗口
function closeWindow()
{
window.parent.postMessage({close:"true"}, "*");
}
父窗口處理：
let that=this;
window.addEventListener('message', function(e) {
if (typeof e.data.close!="undefined")
{
that.showWebView=false;
}}, false);
其中：that.showWebView為在webView中加上的 v-if="showWebView"
相關資料：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
注意：要修改web-view的樣式需要在App.vue中引用樣式
iframe{height:400px !important;z-index:2000;overflow: hidden;top:50% !important}