78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="Cache-Control" content="no-store" />
|
|||
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|||
|
|
<meta http-equiv="Expires" content="0" />
|
|||
|
|
<title></title>
|
|||
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
|
|||
|
|
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function getUrlParamCN(name) {
|
|||
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
|||
|
|
var r = decodeURI(window.location.search).substr(1).match(reg); //匹配目标参数
|
|||
|
|
if (r != null) return unescape(r[2]); return null; //返回参数值
|
|||
|
|
}
|
|||
|
|
var dangAddress = getUrlParamCN("address").split('\'')[1]
|
|||
|
|
function initMap(){
|
|||
|
|
createMap();//创建地图
|
|||
|
|
setMapEvent();//设置地图事件
|
|||
|
|
}
|
|||
|
|
//创建地图函数：
|
|||
|
|
function createMap(){
|
|||
|
|
var map = new BMap.Map("BaiduDitu");//在百度地图容器中创建一个地图
|
|||
|
|
map.centerAndZoom(dangAddress,18);//设定地图的中心点和坐标并将地图显示在地图容器中
|
|||
|
|
window.map = map;//将map变量存储在全局
|
|||
|
|
var myGeo = new BMap.Geocoder();
|
|||
|
|
// 创建小车图标
|
|||
|
|
var myIcon = new BMap.Icon("../../img/public/dwionv.png", new BMap.Size(52, 52));
|
|||
|
|
// 将地址解析结果显示在地图上，并调整地图视野
|
|||
|
|
myGeo.getPoint(dangAddress, function(point){
|
|||
|
|
if(point){
|
|||
|
|
// 创建Marker标注，使用小车图标
|
|||
|
|
// var pt = new BMap.Point(104.142588, 30.664403);
|
|||
|
|
var pt = new BMap.Point(point.lng, point.lat);
|
|||
|
|
var marker = new BMap.Marker(pt, {
|
|||
|
|
icon: myIcon
|
|||
|
|
});
|
|||
|
|
marker.enableDragging(); //开启标注拖拽功能
|
|||
|
|
marker.addEventListener("dragend", function(e){
|
|||
|
|
console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
|
|||
|
|
})
|
|||
|
|
// 将标注添加到地图
|
|||
|
|
map.addOverlay(marker);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// var pt = new BMap.Point(104.143154,30.664661);
|
|||
|
|
// myGeo.getLocation(pt,function(res){
|
|||
|
|
// console.log(res.addressComponents);
|
|||
|
|
// })
|
|||
|
|
}
|
|||
|
|
//地图事件设置函数：
|
|||
|
|
function setMapEvent(){
|
|||
|
|
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
|
|||
|
|
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
|
|||
|
|
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
|
|||
|
|
map.enableKeyboard();//启用键盘上下左右键移动地图
|
|||
|
|
}
|
|||
|
|
$(function(){
|
|||
|
|
initMap();//创建和初始化地图
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="Ditumap">
|
|||
|
|
<div style="border:none;" id="BaiduDitu"></div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
window.onload = function(){
|
|||
|
|
var w_height = $(window).height()
|
|||
|
|
var w_width = $(window).width()
|
|||
|
|
var html = document.getElementById('BaiduDitu')
|
|||
|
|
html.style.height = w_height+'px'
|
|||
|
|
html.style.width = w_width+'px'
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|