<html>
<!-- 截图 -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>静态百度地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no">
<meta name="description" content="百度地图">
<meta name="keywords" content="百度 API">
<meta name="author" content="wg">
<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
}
#map{
height: 90%;
width: 100%;
margin: 0;
}
</style>
<script src="js/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script src="js/html2canvas.js"></script>
<body onload="initMap()">
地址：<input type="text" name="address" id="address" value="北京市" />
<button id="mapsearch">搜索</button>
<input type="button" id="uploadMap" value="导出地图" onclick="saveImg()" />
<div style="width: 540px; height: 320px; border: 1px solid gray" id="container"></div>
<p>
<iframe id="testiframe" src="#" height="1" width="1"></iframe>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.313127, 39.984242); // 创建点坐标
map.centerAndZoom(point, 13);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.enableDragging();//可以拖拽
var staticWith = 540;
var staticHeight = 220;
function initMap() {
var mapsearch = document.getElementById("mapsearch");
mapsearch.onclick = function () {
var address = document.getElementById("address").value;
if (address == "undefined" || address == "") {
alert("请输入地址，再进行搜索！");
return;
}
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function (point) {
if (point) {
marker.setPosition(point);//重新设置标注的坐标
window.setTimeout(function () {//移动地图
map.panTo(point);
}, 2000);
}
}, "上海市");
}
//生成图片
var mapsearch = document.getElementById("uploadMap");
mapsearch.onclick = function () {
testStaticMap();
}
function getStaticMap() {
if (map == '' || map == 'undefined' || marker == '') {
return;
}
var center = map.getCenter().lng + ',' + map.getCenter().lat;
var markers = marker.getPosition().lng + ',' + marker.getPosition().lat;
var zoom = map.getZoom();
var staticmapstr = 'http://api.map.baidu.com/staticimage?center=' + center + '&markers=' + markers + '&zoom=' + zoom + '&width=' + staticWith + '&height=' + staticHeight;
//alert(staticmapstr);//生成的图片地址
console.log(staticmapstr);
return staticmapstr;
}
function testStaticMap() {
var testiframe = document.getElementById("testiframe");
if (testiframe == "undefined" || testiframe == null || testiframe.src == "undefined") {
return;
}
testiframe.src = getStaticMap();
testiframe.width = staticWith;
testiframe.height = staticHeight;
// testiframe.document.execCommand("SaveAs");
// alert(testiframe);
console.log(testiframe);
//http://api.map.baidu.com/staticimage?center=116.313127,39.984242&markers=116.313127,39.984242&zoom=13&width=540&height=220
//DownLoadReportIMG(getStaticMap());
}
}
</script>
</body>
</html>
