调用百度地图

最新推荐文章于 2019-05-19 20:48:42 发布

louzu1

最新推荐文章于 2019-05-19 20:48:42 发布

阅读量882

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/louzu1/article/details/8255498

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

百度地图 api 文档：http://developer.baidu.com/map/

web 调用非常简单，步骤就是：
引入 js 脚本路径；
界面放一个容器(一般是 div)；
声明 js 对象(上面地址有api手册)。

示例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title></title>
</head>
<body>
<div id="allmap"></div>

/*
var map = new BMap.Map("allmap", { mapType: BMAP_HYBRID_MAP }); //设置卫星图为底图
var point = new BMap.Point(116.4035, 39.915);
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
*/

///*
var map = new BMap.Map("allmap");
map.enableScrollWheelZoom();//启用鼠标滚轮
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
//map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL })); //右上角，仅包含平移和缩放按钮
//map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN })); //左下角，仅包含平移按钮
//map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM })); //右下角，仅包含缩放按钮
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })); //2D图，卫星图

map.centerAndZoom(new BMap.Point(123.39464,41.831855), 14);
var marker1 = new BMap.Marker(new BMap.Point(123.39464, 41.831855)); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中

//创建信息窗口
var infoWindow1 = new BMap.InfoWindow("民心科技");
marker1.addEventListener("click", function () { this.openInfoWindow(infoWindow1); });

//自定义标注
var pt = new BMap.Point(123.39464, 41.831855);
var myIcon = new BMap.Icon("1.gif", new BMap.Size(300, 157));
var marker2 = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中

//（创建信息窗口）
var infoWindow2 = new BMap.InfoWindow("<p style='font-size:14px;'>民心科技</p><p style='font-size:14px;'>民心科技</p>");
marker2.addEventListener("click", function () { this.openInfoWindow(infoWindow2); });

var point = new BMap.Point(123.39464, 41.831855);
//信息窗口
var opts = {
  width: 250,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title: "民心科技" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("民心科技<br>民心科技", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口

//*/
</script>

</body>
</html>

android 调用复杂点，要先申请一个 key，下面补全：

louzu1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
调用百度地图

百度地图 api 文档：http://developer.baidu.com/map/web 调用非常简单，步骤就是：引入 js 脚本路径；界面放一个容器(一般是 div)；声明 js 对象(上面地址有api手册)。示例：body, html,#allmap {width: 100%;height: 100%;overflow: hidden;h
复制链接

扫一扫