博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
最基础的百度地图Api调用
阅读量:6498 次
发布时间:2019-06-24

本文共 1418 字,大约阅读时间需要 4 分钟。

以下是最简单的百度地图的应用,还有许多功能有待学习,可以百度搜索“百度Api”进行实例学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>百度地图显示</title>
    <!--css代码-->
    <style type="text/css">
    body, html,#allmap
     {
         width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
     }    
    </style>
    <!--调用百度接口-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<!--地图显示-->
<div id="allmap"></div>
</body>
</html>
<!--javascript代码-->
<script type="text/javascript">
    //百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(118.6,32.11 ), 10);  // 初始化地图,设置中心点坐标和地图级别,以南京为地图中心
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 左上角,添加比例尺
    map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL })); //右上角,仅包平       移和缩放按钮
    map.addControl(new BMap.NavigationControl()); //左上角,添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略图
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //打开缩略图
    map.addOverlay(new BMap.Marker(new BMap.Point(118.6, 32.11))); //添加标注
</script>

效果如图所示:

转载于:https://www.cnblogs.com/youngkay/p/4221836.html

你可能感兴趣的文章
Ubuntu 16.04 LTS安装sogou输入法详解
查看>>
计算几何专题
查看>>
GNU/Linux 正则表达式与三剑侠(grep,sed,awk)(精)
查看>>
36、自定义控件详解(一)-- 自定义属性
查看>>
DOM学习笔记二
查看>>
[Array]189. Rotate Array
查看>>
iuap
查看>>
inkscape
查看>>
关于C语言中单双引号的问题
查看>>
I00003 贝尔三角形
查看>>
HDU1200 POJ2039 ZOJ2208 UVALive3084 To and Fro【密码】
查看>>
CCF201403-1 相反数(100分)
查看>>
表单通过连接数据库数据进行验证
查看>>
redis hash操作 list列表操作
查看>>
利用Hibernate 框架,实现对数据库的增删改查
查看>>
mysql开启远程连接权限
查看>>
关于商米D1S,USB默认权限在关机后丢失的FAQ
查看>>
css3 text-transform变形动画
查看>>
scikit-learn中文api
查看>>
一个完整的大作业--广州市社会保障(市民)卡服务网
查看>>