获取地图
来源:互联网 发布:天正建筑软件 编辑:程序博客网 时间:2024/05/24 06:32
先申请百度地图的api密钥
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Map</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=xmtUwYALpcearNkS7HYOGylP&v=2.0&services=false"></script>
</head>
<body>
<div id="content" class="content">
<input type="text" value="" id="keyword" />
<input type="button" name="" id="" value="查询" onclick="search()" />
<div style="width:600px;height:500px;border:0px solid gray" id="container"></div>
<p id="aa"></p>
<script type="text/javascript">
//创建Map实例
var map = new BMap.Map("container");
var point = new BMap.Point(118.060576, 36.842432);
map.centerAndZoom(point, 15);
//添加鼠标滚动缩放
map.enableScrollWheelZoom();
//添加缩略图控件
map.addControl(new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
//添加缩放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加地图类型控件
//map.addControl(new BMap.MapTypeControl());
//设置标注的图标
var icon = new BMap.Icon("/images/icon.jpg", new BMap.Size(100, 100));
//设置标注的经纬度
var marker = new BMap.Marker(new BMap.Point(118.056156, 36.840988), { icon: icon });
//把标注添加到地图上
map.addOverlay(marker);
var content = "<table>";
content = content + "<tr><td> 编号:001</td></tr>";
content = content + "<tr><td> 地点:淄博市张店区</td></tr>";
content = content + "<tr><td> 时间:2014-09-26</td></tr>";
content += "</table>";
var infowindow = new BMap.InfoWindow(content);
marker.addEventListener("click", function () {
this.openInfoWindow(infowindow);
});
//点击地图,获取经纬度坐标
map.addEventListener("click", function (e) {
document.getElementById("aa").innerHTML = "经度坐标:" + e.point.lng + " 纬度坐标:" + e.point.lat;
});
//关键字搜索
function search() {
var keyword = document.getElementById("keyword").value;
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
local.search(keyword);
}
</script>
</div>
</body>
</html>
- 获取地图
- google地图获取经纬度
- google地图获取路径
- android获取地图信息
- 获取百度地图经纬度
- 地图获取解决方案
- OpenStreetMap 获取地图数据
- 地图添加与获取
- 地图获取当前位置
- 批量获取地图经纬度
- 获取地图坐标
- 地图 获取线路信息
- 获取地理经纬度(地图)
- 获取地图截图
- java获取百度地图
- 获取百度地图
- python 获取地图信息
- 腾讯地图获取距离
- Android使用Mob开发平台免费短信验证
- android BroadcastReceiver动态监听网络连接
- JPA使用非JTA数据源
- Android扩展通知栏(大号的Notification)
- GCD的常见用法
- 获取地图
- Android4.4 之Bluetooth整理
- Javassist 教程(一)
- 学习spring mabits
- SSH 远程控制 Linux
- 让python类的方法或特性变成私有
- Centos7安装Mysql
- 三种迷宫生成算法
- Linux Ubuntu 下 apache 配置