1.第一步，創(chuàng)建html頁面，引用百度地圖，創(chuàng)建地面圖片疊加層
根據(jù)官方指示，創(chuàng)建html頁面位置
在html頁面里引用uni.webview.1.5.4文件
在html頁面里創(chuàng)建地面圖片疊加層：
var map = new BMapGL.Map('container');
?? ?map.centerAndZoom(new BMapGL.Point(105.753869, 34.571069), 18);
?? ?map.enableScrollWheelZoom(true);
?? ?map.setTilt(1);
?? ?map.setDisplayOptions({
?? ??? ?poiText: false, ?// 隱藏poi標(biāo)注
?? ??? ?poiIcon: false, ?// 隱藏poi圖標(biāo)
?? ??? ?building: false ?// 隱藏樓塊
?? ?});
?? ?var pStart = new BMapGL.Point(105.751549, 34.568280);
?? ?var pEnd = new BMapGL.Point(105.756287, 34.57384);
?? ?var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new? ? ? ? ? ? ? ? ? ? BMapGL.Point(pEnd.lng, pStart.lat));
?? ?var imgOverlay = new BMapGL.GroundOverlay(bounds, {
?? ??? ?type: 'image',
?? ??? ?url: './images/ditu2.jpg', // ---------------------------你的地區(qū)圖片
?? ??? ?opacity: 1
?? ?});
// imgOverlay.disableMassClear(); // 保留點(diǎn)
// map.clearOverlays();? // 清除點(diǎn)
map.enableScrollWheelZoom(true); ? ? //開啟鼠標(biāo)滾輪縮放
?map.addOverlay(imgOverlay);
2.在uniapp頁面里引用html頁面 ‘web-view’
?
?3.html頁面與uniapp頁面的交互傳值
?html頁面里：
// 向uniapp傳值?
document.addEventListener('UniAppJSBridgeReady', function(res) {
? ? ? ? ? ? var data = data //-------------- 你需要傳值的數(shù)據(jù)
?? ??? ??? ?document.querySelector('#ui-ChengL').addEventListener('click', function(evt) {
? ? ? ? ? ? ? ? ? console.log('---------->',data )
?? ??? ??? ??? ???parent.postMessage(data , "*");
?? ??? ??? ??})
? });
? uniapp頁面里：
? // 接受html頁面?zhèn)鞯闹?mark hidden color="red">文章來源：http://www.zghlxwxcb.cn/news/detail-492929.html
? ?onLoad() {
?? ??? ??? ?window.addEventListener('message', function(e) { // 監(jiān)聽 message 事件
?? ??? ??? ??? ?console.log(e);
?? ??? ??? ??? ?console.log(e.data,'------->'); // 得到傳的值
?? ??? ??? ??? ?let url = undefined;
?? ??? ??? ??? ?if(e.data == '1'){
?? ??? ??? ??? ??? ?url = '../index/index';
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?url = '../audioDatils/audioDatils?codes='+e.data? // 跳轉(zhuǎn)詳情頁傳值
?? ??? ??? ??? ?}
?? ??? ??? ??? ?uni.redirectTo({
?? ??? ??? ??? ??? ?url:url
?? ??? ??? ??? ?})
?? ??? ??? ?});
?? ???},文章來源地址http://www.zghlxwxcb.cn/news/detail-492929.html
到了這里，關(guān)于uniapp:引用百度地圖，創(chuàng)建地面圖片疊加層及html頁面向uniapp頁面?zhèn)髦到换サ奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
