当前位置：移动技术网 > IT编程>网页制作>Html5 > HTML5创建高德地图

HTML5创建高德地图

2020年01月06日 | 移动技术网IT编程 | 我要评论

天下收藏网,鼠标中键,娄底天气预报一周

创建高德地图

功能真的很好很强大，有图有证据！

1.申请key值去官网
2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script>

3.有个div容器
4.创建地图 new amap.map('容器的名字')；

初始化地图（默认设置）

    <div id="container"></div> 
    <script type="text/javascript">
        new amap.map('container');
    </script>

初始化地图（简单自定义设置）

    var map = new amap.map('container',{
        zoom:16,
        center:[116.379391,39.861536],
    });

getzoom() 获取地图的级别
getcenter(); 获取地图的中心位置

zoom 的数字越大显示的越精细越小显示的范围越大
setzoom 可以手动去设定地图级别

     map.setzoom(15);

setcenter([]) 设置中心点，放入坐标

        map.setcenter([121.222,30]);

中心点和层级一起设定

    map.setzoomandcenter(12,[121.22,30])

获取级别和中心点

        console.log(map.getzoom());
        console.log(map.getcenter().tostring());

on('moveend') //地图移动结束时
on('zoomend') //地图级别发生改变时

获取行政区
map.getcity(function(info){
info 当前中心点的行政区
});

        map.getcity(function(info){
            setcenternode.innerhtml = info.province+','+info.district
        });

设置行政区

map.setcity('字符串') 想让地图到达该地区的中心点
    map.setcity('天津市');

获取地图的范围

    console.log(map.getbounds().northeast.tostring());//右上角的坐标
    console.log(map.getbounds().southwest.tostring());//左下角的坐标

通过事件来设定显示限制

        btn.onclick = function(){
            var bounds = map.getbounds();
            bounds.northeast.r = number(xnode.value);
            bounds.southwest.r = number(ynode.value);
            map.setlimitbounds(bounds);
        };

通过事件解除显示限制

        clear.onclick = function(){
            map.clearlimitbounds();
        };

设置地图的显示范围

    var mybounds = new amap.bounds([88.379391,20.861536],[117.379391,41.861536])
    map.setbounds(mybounds); //但是不是特别精准，会以它觉得最好的方式去显示

地图的平移
panby(x,y) x代表向左平移多少像素 / y代表向上平移多少像素
panto([x坐标，y坐标]) 地图会直接平移到这个位置

        <input type="" name="" id='xnode'>
        <input type="" name="" id='ynode'>
        btn.onclick =function(){
            map.panto([xnode.value,ynode.value])
        };

获取鼠标的经纬度
longitude 经度 / latitude 纬度

        map.on('click',function(e){
            //xynode.innerhtml = e.lnglat.lng + ',' + e.lnglat.lat;
            map.setcenter([e.lnglat.lng,e.lnglat.lat])
        });

设置地图鼠标的默认样式
setdefaultcursor('样式')
cursor : 里面所有的样式都可以

        map.setdefaultcursor('-webkit-grabbing');

地图搜索

amap.plugin('amap.autocomplete',function(){
    new amap.autocomplete().search(要搜索的内容,function(status,data){
        console.log(data 搜索出来的数据)
    })
})

案例：输入地址出现下拉列表，点击可切换地图

    <div id="container"></div> 
    <div id='setcenternode'>
        <!-- 搜索框 -->
        <input type="" name="" id='searchtext'>  
        <!-- 下拉列表内容显示位置 -->
        <ul id='node'></ul>
    </div>
    ---------
    new amap.autocomplete({
        input:'searchtext'
    });

加载插件的方式有两种

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.autocomplete"></script>
    -------------
    new amap.autocomplete({
        input:'searchtext'
    });

地图搜索与poi（兴趣点）结合1

    amap.service(['amap.placesearch'],function(){
        new amap.placesearch({
            pagesize:5, //当页一共显示多少条
            pageindex:1, //当前第几页
            city:'010', //兴趣点的城市
            citylimit:true, //是否限制在设定的城内搜索
            map:map, //展示在哪个地图里
            panel:'setcenternode' //放在哪个元素下
        })
    })

地图搜索与poi（兴趣点）结合2

        var searchnode = new amap.autocomplete({
            input:'searchipt'
        });
        var placesearch = new amap.placesearch({
            map:map
        });
        amap.event.addlistener(searchnode,'select',function(e){
            placesearch.search(e.poi.name)
        });

地图搜索与poi（兴趣点）结合3--搜索周边

    new amap.placesearch({
        type:'住宿', //搜索的结果的过滤 结果类型
        pagesize:5,
        pageindex:1,
        city:'010',
        citylimit:true,
        map:map, //展示在哪个地图里
        panel:'setcenternode' //放在哪个元素下
    }).searchnearby('北京',[116.379391,39.861536],1000,function(){});

设置标记

    var marker = new amap.marker({
        icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //标记的图标
        position:[e.lnglat.lng,e.lnglat.lat], //标记的坐标
        offset:new amap.pixel(-25,-25) // 像素的偏差值
    });
    marker.setmap(map);

设置多个标记

        var marker = new amap.marker({
            icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //标记的图标
            position:[116.379391,39.861536], //标记的坐标
           // offset:new amap.pixel(-50,-500) // 像素的偏差值
        });
        var marker2 = new amap.marker({
            icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //标记的图标
            position:[116.378391,39.825536], //标记的坐标
           // offset:new amap.pixel(-50,-500) // 像素的偏差值
        });
        map.add([marker,marker2])

自定义标记图标

    var mk1 = new amap.icon({
        size:new amap.size(500,500), //图标大小
        image:'./1.jpg', //图片地址
        imagesize:new amap.size(100,100) //最终在map里面显示的大小
    //  imageoffset:new amap.pixel(-50,-50) //裁剪 偏差值
    });
    var marker = new amap.marker({
        position:[116.379391,39.861536],
        icon:mk1
    });
    map.add([marker])

删除标记

    marker.setmap(null);
    map.remove([marker]);

缩放比例尺控件

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.scale,amap.toolbar"></script>
    map.addcontrol(new amap.scale());
    map.addcontrol(new amap.toolbar());

3d地图

    var map = new amap.map('container',{
        zoom:17,
        pitch:90,
        center:[116.379391,39.861536],
        viewmode:'3d', //变成了3d 地图了
        buildinganimation:true // 可以让显示的建筑物变成动画现实
    });
    map.addcontrol(new amap.controlbar({
        showzoombar:true, // 显示 zoom条控件
       // showcontrolbutton:true,// 可以取消 倾斜旋转角度的按钮
        position:{ //控件的定位
            right:'50px',
            top:'30px'
        }
    }))

驾驶导航

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.driving,amap.autocomplete"></script> 
    new amap.driving({
        map:map,
        panel:'panel'
        }).search([
            {keyword:起点,city:'北京'},
            {keyword:终点,city:'北京'}
        ],function(status,data){
            console.log(data);
     })

通过鼠标点击获取起始点和终点，规划驾车路线

        var num = 0, arr = [];
        map.on('click',function(e){
            num++;
            if(num%2 == 1){
                arr = [e.lnglat.r,e.lnglat.p];
            }
            else{
                new amap.driving({
                    map:map,
                    panel:'panel'
                    }).search(new amap.lnglat(arr[0],arr[1]),new amap.lnglat(e.lnglat.r,e.lnglat.p),function(status,data){
                        console.log(data);
                })
            }
        });

通过经纬度来进行导航

    new amap.driving({
        map:map,
        panel:'panel'
        }).search(new amap.lnglat(startx,starty),new amap.lnglat(endx,endy),function(status,data){
            console.log(data);
    })

步行路线的规划

    new amap.walking({
        map:map,
        panel:'panel'
        }).search([
            {keyword:起点,city:'北京'},
            {keyword:终点,city:'北京'}
        ],function(status,data){
            console.log(data);
    })

步行路线的坐标规划

    new amap.walking({
        map:map,
        panel:'panel'
        }).search([x,y],[x,y],function(status,data){
            console.log(data);
    })

货车路线规划（多点）-坐标

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.truckdriving,amap.autocomplete"></script> 
    new amap.truckdriving({
            map:map,
            panel:'panel',
            city:'beijing',//城市
            size:1 //大小
        }).search([{lnglat:[116.379391,39.861536]},{lnglat:[116.979391,39.161536]},{lnglat:[116.579391,40.861536]}],function(status,data){
            console.log(data);
    });

货车路线规划（多点）-位置

    new amap.truckdriving({
            map:map,
            panel:'panel',
            city:'beijing',//城市
            size:1 //大小
        }).search([{
            keyword:'起点'
        },
        {
            keyword:'途径点'
        }
        {
            keyword:'途径点'
        }
        {
            keyword:'终点'
        }],function(status,data){
            console.log(data);
    });

骑行路线规划

new amap.riding({
map:map,
panel:'panel'
}).search(new amap.lnglat(startx,starty),new amap.lnglat(endx,endy),function(status,data){
console.log(data);
})

    <div id="container"></div> 
    <div id='panel'></div>
    <div id='search'>
        起点:<input type="" name="" id='startnode'><br>
        终点:<input type="" name="" id='endnode'><br>
        <button id='btn'>开始导航</button>
    </div>
        var map = new amap.map('container',{
            zoom:11,
            center:[116.379391,39.861536],
        });
        new amap.autocomplete({
            input:'startnode'
        });
        new amap.autocomplete({
            input:'endnode'
        });
        btn.onclick = function(){
            new amap.riding({
                map:map,
                panel:'panel'
            }).search([
                {keyword:startnode.value,city:'北京'},
                {keyword:endnode.value,city:'北京'}
            ],function(status,data){
                console.log(data);
            })
        };

根据鼠标点击录入起始点和目标，规划骑行路线

        var num = 0, arr = [];
        map.on('click',function(e){
            num++;
            // 点击一次时将起始点计入数组
            if(num%2 == 1){
                arr = [e.lnglat.r,e.lnglat.p];
            }else{
                // 第二次点击时开始规划路线
                new amap.riding({
                    map:map,
                    panel:'panel'
                    }).search(new amap.lnglat(arr[0],arr[1]),new amap.lnglat(e.lnglat.r,e.lnglat.p),function(status,data){
                        console.log(data);
                })
            }
        });

地铁+公交的导航方式

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.transfer,amap.autocomplete"></script>
    new amap.transfer({
        map:map,
        panel:'panel'
        }).search([
            {keyword:起始点,city:'北京'},
            {keyword:终点,city:'北京'}
            //只支持数组的前两个内容
        ],function(status,data){
            console.log(data);
    })

根据鼠标点击录入起始点和目标，规划公交路线

        var num = 0, arr = [];
        map.on('click',function(e){
            num++;
            if(num%2 == 1){
                arr = [e.lnglat.r,e.lnglat.p];
            }
            else{
                new amap.transfer({
                    map:map,
                    panel:'panel',
                    city:'北京'
                    }).search(new amap.lnglat(arr[0],arr[1]),new amap.lnglat(e.lnglat.r,e.lnglat.p),function(status,data){
                        console.log(data);
                })
            }
        });

地图类型的切换
amap.maptype 引入这个插件

    map.addcontrol(new amap.maptype({
        defaulttype:1,//0 默认 1代表的是卫星
        showroad:true //显示路况
    }));

常用的插件鹰眼插件 overview

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.overview"></script> 
    map.addcontrol(new amap.overview());

控件的添加show()
控件的删除hide()

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=amap.overview,amap.scale,amap.toolbar"></script> 
    var ov = new amap.overview({
        visible:true //默认显示和隐藏
    });
    var os = new amap.scale();
    var ot = new amap.toolbar()
    map.addcontrol(ov);
    map.addcontrol(os);
    map.addcontrol(ot);
    let yynode = gjtnode = blcnode = true;
    // 鹰眼（点击对应的控制鹰眼按钮）
    yy.onclick = function(){
        if(yynode == true){
            ov.hide();
        }
        else{
            ov.show();
        };
        yynode = !yynode
    };
    // 工具条 
    gjt.onclick = function(){
        if(gjtnode == true){
            ot.hide();
        }
        else{
            ot.show();
        };

        gjtnode = !gjtnode
    };
    // 比例尺
    blc.onclick = function(){
        if(blcnode == true){
            os.hide();
        }
        else{
            os.show();
        };
        blcnode = !blcnode
    }

地图加载完成事件 complete

        map.on('complete',function(){
           var text = new amap.text({
             text:'地图加载完成',
             draggable:true,
             position:[116.379391,39.861536]
           }).on('mousemove',function(){
            console.log(1)
           });
           text.setmap(map);

        });
        console.log('地图未加载');

地图显示等级改变事件

        map.on('zoomstart',function(){
            console.log('地图等级改变开始');
        });
        map.on('zoomend',function(){
            console.log('地图等级改变结束');
        });

中心点移动事件

        map.on('mapmove',function(){
            console.log('中心点移动中.');
        });
        map.on('movestart',function(){
            console.log('地图中心点开始移动');
        });
        map.on('moveend',function(){
            console.log('地图中心点移动结束');
        });

地图容器大小发生改变事件

    map.on('resize',function(){
        console.log('容器大小改变中');
    });

覆盖物与地图的交互

    //覆盖物
    var text = new amap.text({
        text:'覆盖物事件',
        position:[116.379391,39.861536]
    });
    //鼠标移入覆盖物
    text.on('mouseover',function(){
        console.log('覆盖物移入');
    });
    //鼠标移出覆盖物
    text.on('mouseout',function(){
        console.log('覆盖物移出');
    });
    //鼠标在覆盖物上移动
    text.on('mousemove',function(){
        console.log('覆盖物上移动鼠标');
    });

插入圆形的矢量图

        var circle = new amap.circle({
            center:[116.379391,39.861536],
            radius:10
        });
        circle.setmap(map);

插入长方形的矢量图

        var rectangle = new amap.rectangle({
            bounds:new amap.bounds(new amap.lnglat(116.379391,39.861536),new amap.lnglat(116.379491,39.861636))
        });
        rectangle.setmap(map);

hide()隐藏
show()显示

    circle.hide();
    rectangle.show();

右键菜单事件

    //创建一个右键菜单
    var contextmenu = new amap.contextmenu();
    //右键的第一个菜单
    contextmenu.additem('放大一级',function(){
        map.zoomin();
    },0);
    //右键的第二个菜单
    contextmenu.additem('缩小一级',function(){
        map.zoomout();
    },1);
    //给地图绑定右键
    map.on('rightclick',function(e){
        //打开右键 
        //map 在哪个地图里
        //参数2 - 位置
        contextmenu.open(map,e.lnglat);

        settimeout(function(){
            contextmenu.close();
        },3000);
        // 关闭右键菜单
    });

dom事件绑定

amap.event.adddomlistener （绑定的元素，绑定的事件名（click、mousedown），函数）
        var lis1 = amap.event.adddomlistener(button1,'click',function(){
            map.zoomin();
        });

dom事件解除绑定

amap.event.removelistener (要解除绑定函数名)
        amap.event.adddomlistener(button2,'click',function(){
            amap.event.removelistener(lis1);
        });

自定义事件 addlistener/on/emit

       //变量记录点击几次
        var count = 0;
        //点击事件
        var _onclick = function(){
            //count事件：事件派发 也可以说是变量的改变
            map.emit('count',{count:count += 1});
        };
        //监听的变量发生改变时触发的函数
        var _oncount = function(){
            console.log(count);
        };
        //监听的变量发生改变时
        map.on('count',_oncount);
        amap.event.addlistener(map,'click',_onclick);

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Html5 canvas画图白板踩坑

这篇文章主要介绍了Html5 canvas画图白板踩坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一... [阅读全文]
h5页面唤起app如果没安装就跳转下载(iOS和Android)

这篇文章主要介绍了h5页面唤起app如果没安装就跳转下载(iOS和Android),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，... [阅读全文]
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同

这篇文章主要介绍了数据存储的三种方式 cookie sessionstorage localstorage 异同，本文通过实例代码给大家介绍的非常详细，对大家的... [阅读全文]
Html5嵌入钉钉的实现示例

这篇文章主要介绍了Html5嵌入钉钉的实现示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
浅析图片上传及canvas压缩的流程

这篇文章主要介绍了浅析图片上传及canvas压缩的流程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下..... [阅读全文]
HTML5新语法介绍和新特性标签

了解HTML5 新语义标签 "http://www.w3school.com.cn/html/html5_semantic_elements.asp" ... [阅读全文]
React Native超简单完整示例－tabs、页面导航、热更新、用户行为分析

初学React Native，如果没有人指引，会发现好多东西无从下手，但当有人指引后，会发现其实很简单。这也是本人写这篇博客的主要原因，希望能帮到初学者... [阅读全文]
React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

React应用在初始化和更新的过程中，会经过一系列的逻辑，React在不同的逻辑时期会执行不同的生命周期函数，用来给我们做一些处理。对于初次挂载来说，... [阅读全文]
浅谈Html5页面打开app的一些思考

这篇文章主要介绍了浅谈Html5页面打开app的一些思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 20-03-30 [阅读全文]
详解canvas.toDataURL()报错的解决方案全都在这了

这篇文章主要介绍了详解canvas.toDataURL()报错的解决方案全都在这了，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，... [阅读全文]

网友评论


验证码：

HTML5创建高德地图

2020年01月06日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论