tp5.1使用百度地图

最新推荐文章于 2022-06-14 10:10:57 发布

原创最新推荐文章于 2022-06-14 10:10:57 发布 · 952 阅读

0 ·

CC 4.0 BY-SA版权

php 同时被 2 个专栏收录

14 篇文章

订阅专栏

百度地图

2 篇文章

订阅专栏

1.引入百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=自己的AK值"></script>

2.创建容器

<div id="container" style="height: 500px; width: 500px;"></div>

3.实例化BMap t添加中心点

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

4.添加控件

map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, type:BMAP_NAVIGATION_CONTROL_SMALL}));

控件属性地址：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a2b2

5.添加右键菜单

var menu = new BMap.ContextMenu();
var textMenu = [
    {
        text:'放大',
        callback:function () {
            map.zoomIn();
        }
    },
    {
        text:'缩小',
        callback:function () {
            map.zoomOut();
        }
    }
];
for(var i=0; i<textMenu.length; i++){
    menu.addItem(new BMap.MenuItem(textMenu[i].text, textMenu[i].callback, 100));
}
map.addContextMenu(menu);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container" style="height: 500px; width: 500px;"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=vfbQEcAtUbyRfuCgwbymt5VmPu8mxCt7"></script>
<script>
    var map = new BMap.Map('container');
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    //添加控件
    map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, type:BMAP_NAVIGATION_CONTROL_SMALL}));
    //添加右键菜单
    var menu = new BMap.ContextMenu();
    var textMenu = [
        {
            text:'放大',
            callback:function () {
                map.zoomIn();
            }
        },
        {
            text:'缩小',
            callback:function () {
                map.zoomOut();
            }
        }
    ];
    for(var i=0; i<textMenu.length; i++){
        menu.addItem(new BMap.MenuItem(textMenu[i].text, textMenu[i].callback, 100));
    }
    map.addContextMenu(menu);

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