python代码编写html,调用百度地图api
百度地图api的文档: 百度地图开放平台 | 百度地图API SDK | 地图开发
(1)点击“开发文档---->其他版本----->JavaScript v3.0”,进入JavaScript v3.0版本页面,
(2)注册百度账号,申请成为开发者,获取密钥,
(3)新建一个map.html,参照 JavaScript API - 添加控件 | 百度地图API SDK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图</title>
<style>
#container{
width:1200px;
height:400px;
border:1px solid #999;
}
</style>
<!--引用百度地图API文件-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=密钥"></script>
</head>
<body>
<div id="container">
</div>
<script>
// 创建地图实例
var map = new BMap.Map("container");
// 设置中心点坐标
var point = new BMap.Point(116.404, 39.915);
// 地图初始化,同时设置地图展示级别
map.centerAndZoom(point, 15);
</script>
</body>
</html>
浏览器打开效果:
(4)为百度地图添加多个控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图</title>
<style>
#container{
width:1300px;
height:600px;
border:1px solid #999;
}
</style>
<!--引用百度地图API文件-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=密钥"></script>
</head>
<body>
<div id="container">
</div>
<script>
// 1.创建地图实例
var map = new BMap.Map("container");
// 2.设置中心点坐标
var point = new BMap.Point(116.404, 39.915);
// 3.地图初始化,同时设置地图展示级别(3-19)
map.centerAndZoom(point, 10);
// 4.开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 5.添加控件
// PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方
map.addControl(new BMap.NavigationControl());
// 添加缩略图:默认位于地图右下方,是一个可折叠的缩略地图
map.addControl(new BMap.OverviewMapControl());
// 比例尺:默认位于地图左下方,显示地图的比例关系
map.addControl(new BMap.ScaleControl());
// 地图类型:默认位于地图右上方
map.addControl(new BMap.MapTypeControl());
</script>
</body>
</html>
浏览器打开效果:
(5)还可以
-更改图标:
// 更改图标,通过Icon类可实现自定义标注的图标
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25));
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
-地址解析器:
// 地址解析器
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市海淀区清华园赛尔大厦", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
},
"北京市");
浏览器页面效果:
-添加监听事件:
// 添加监听事件
var opts = { // 提供信息窗口
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "信息窗口标题 " // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
// 点击标注,打开窗口信息
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, map.getCenter()); // 默认在地图的正中心打开信息窗口
});
浏览器页面效果: