首页 > 移动平台 > 详细

高德地图API实例--移动端婚礼请帖

时间:2020-03-07 21:48:21      阅读:86      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片

 

 

首先添加移动端meta

<meta name="viewport" content="initial-scale=1.0,user-scaleble=no,width=device-width">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <meta name="viewport" content="initial-scale=1.0,user-scaleble=no,width=device-width">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driving,AMap.Autocomplete"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        body{background-color: red;}
        #container {width:100%; height: 80%;top:10%;left:0;position: absolute; }  
        #search{position: absolute;width:100%;height:10%;top:0;background-color: #fff;}
        #ipt{border:1px solid;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="search">
        <input type="text" id="ipt">
        <button id="btn">导航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   

        // 添加自动补全功能
        new AMap.Autocomplete({
            input:"ipt"
        }) 

        btn.onclick=function(){
            //使用插件
            new AMap.Driving({
                map:map
            }).search([
                {keyword:ipt.value,city:"宁波"},
                {keyword:"宁波大剧院",city:"宁波"}//婚礼位置
            ],function(status,data){
                console.log(data);
            });
        }
        

    </script>    
</body>
</html>

技术分享图片

 

高德地图API实例--移动端婚礼请帖

原文:https://www.cnblogs.com/chenyingying0/p/12437295.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!