使用HBuilder调用百度地图URI API

2019-07-07  本文已影响0人  Ringo_
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
        .mui-content{
            margin-top: 20px;
        }
        #content {
            padding: 8px;
        }
        #address {
            margin-top: 10px;
        }
        #btn {
            background-color: #007AFF;
            color: white;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="content">
        <input type="text" id="address">
        <button id="btn">在地图中查找</button>
    </div>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        
        document.getElementById('btn').addEventListener('tap',function(){
        // 调起百度地图 
        // http://lbsyun.baidu.com/index.php?title=uri/api/android
        // iOS端
        var address = document.getElementById('address').value;//获取目的地址
        var href = "baidumap://map/geocoder?address="+address+"&src=webapp.geo.yourCompanyName.yourAppName";
        // Android端
        var anhref = "bdapp://map/geocoder?address="+address+"&src=openApiDemo"
        var osName = plus.os.name;
        if (osName == "iOS") {
            window.open(href);
        } else{
            window.open(anhref);
        }
    })
    </script>
    
</body>
</html>
image.png
image.png
上一篇 下一篇

猜你喜欢

热点阅读