h5唤起地图 

//js
var latitude
var longitude
$(function() {
    $(".pick-message").hide()
    $("#container1").height($(window).height() - 45 - 80)
    if(document.getElementById("latitude") == null) {
        latitude = 113.683072
    } else {
        latitude = document.getElementById("latitude").value
    }
    if(document.getElementById("longitude") == null) {
        longitude = 34.69353
    } else {
        longitude = document.getElementById("longitude").value
    }
    //基本地图加载
    var map = new AMap.Map("container1", {
        resizeEnable: true,
        center: [latitude, longitude], //地图中心点
        zoom: 15 //地图显示的缩放级别
    });
    var marker = new AMap.Marker({
        position: new AMap.LngLat(latitude, longitude), // 经纬度对象，也可以是经纬度构成的一维数组[114.38, 38.9]
        title: ''
    });
    map.add(marker);
})

function show_message() {
    $(" .pick-message ").show()
}

function hide_message() {
    $(" .pick-message ").hide()
}

function go_gaode(res) {
    //高德地图
    //    window.location.href = 'https://uri.amap.com/navigation?from=' + res.longitudeInfo + ',' + res.latitudeInfo + '&name=' + res.name
    //    window.location.href = 'https://uri.amap.com/navigation?from=114.02597366,22.54605355&to=114.029243,22.609562'
    window.location.href = 'https://uri.amap.com/marker?position=' + latitude + "," + longitude
}

function go_baidu(res) {
    //百度地图
    //    window.location.href = 'http://api.map.baidu.com/marker?location=' + res.latitudeInfo + ',' + res.longitudeInfo + '&title=' + res.name + '&output=html'
    window.location.href = 'http://api.map.baidu.com/marker?location=' + longitude + ',' + latitude + "&output=html"
}

function go_tengxun() {
    //腾讯地图
    window.location.href = 'https://apis.map.qq.com/uri/v1/geocoder?coord=' + longitude + ',' + latitude
}

function cancel() {
    window.location.href = 'index.html'
}
//html

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>########</title>
        <link rel="stylesheet" type="text/css" href="css/zhuanxian.css" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script type="text/javascript" src="js/zhuanxian.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <!--<script type="text/javascript" src='js/maps.js'></script>
        <script type="text/javascript" src="js/addToolbar.js"></script>-->
        <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.6&key=b465f7d67ff64f57a46cb96f8cdb504f
&plugin=AMap.TruckDriving'></script>
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
        <script type="text/javascript" src="js/the_map.js"></script>
    </head>

    <body>
        <div class="pick-message">
            <div class="the_href_div">
                <button class="go_map_button" onclick="go_gaode()">高德地图</button>
                <button class="go_map_button" onclick="go_tengxun()">腾讯地图</button>
                <button class="go_map_button" onclick="go_baidu()">百度地图</button>
                <button class="go_map_button" style="margin-top: 5px;" onclick="hide_message()">取消</button>
            </div>
        </div>
        <div class="the-cancel">
            <img style="height: 20px;width: 20px;" src="img/箭头 左 细.svg" onclick="cancel()"/>
            <a class="title">到这里去</a>
        </div>
        <div class="mapBox">
            <!-- 地图 -->
            <div id="container1"></div>
        </div>
        <div class="map-foot">
            <div style="margin-left: 5%;width: 60%;">
                <span class="title">#############</span>
                <span class="address">###########</span>
            </div>
            <button class="show-button" onclick="show_message()">
                <img style="height: 40px;width: 40px;" src="img/golf course.svg" />
            </button>
        </div>
    </body>
</html>

 

posted @ 2020-07-21 18:05  ♥之  阅读(366)  评论(0)  编辑  收藏  举报