<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bP0vnjPpKFTtXCAWkGyOS5LbtckGsndV"></script>
</head>
<body>
<div id="app">
<div class="form-inline">
<div class="form-group">坐标</div>
<input type="text" class="form-control" placeholder="经度" v-model="appX"/>
<input type="text" class="form-control" placeholder="维度" v-model="appY"/>
<button class="btn btn-info" @click="xyButton"><span class="glyphicon glyphicon-map-marker" aria-hidden="true">坐标</span></button>
</div>
<!-- Modal -->
<div class="modal fade" id="BMapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="height: 450px; width: 850px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">坐标</h4>
</div>
<div class="modal-body">
<div class="form-inline">
<span>经纬度：</span>
<input type="text" class="form-control" v-model="BMapModalX" />
<input type="text" class="form-control" v-model="BMapModalY" />
</div>
<div>
<div style="width: 150px; position: absolute; z-index: 2; margin-top: 10px; margin-left: 10px;">
<input type="text" class="form-control" v-model="BMapModalGeo" @keydown.enter="geoEnter" placeholder="输入地址回车查询"/>
</div>
<div id="container" style="height: 450px; margin-top: 10px;"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="BMapModalButton">确定</button>
</div>
</div>
</div>
</div>
</div>
<script>
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var vue = new Vue({
el: '#app',
data: {
appX: '116.404',
appY: '39.915',
BMapModalX: '',
BMapModalY: '',
BMapModalGeo:''
},
methods: {
xyButton: function () {
this.BMapModalX = this.appX;
this.BMapModalY = this.appY;
$("#BMapModal").modal();
setTimeout(function () {
// 创建点坐标
var point = new BMap.Point(vue.appX, vue.appY);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 6);
//鼠标滚轮缩放
map.enableScrollWheelZoom();
//禁用双击放大
//map.disableDoubleClickZoom();
//平移缩放控件,anchor显示在右下角
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
//标注点
var marker = new BMap.Marker(point);
map.clearOverlays();
map.addOverlay(marker);
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
//右键单击事件
map.addEventListener("rightclick", function (e) {
vue.BMapModalX = e.point.lng;
vue.BMapModalY = e.point.lat;
var p = new BMap.Point(e.point.lng, e.point.lat);
marker = new BMap.Marker(p);
map.clearOverlays();
map.addOverlay(marker);
map.setCenter(new BMap.Point(e.point.lng, e.point.lat));//重置中心点
})
var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4><p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p></div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
marker.addEventListener("mouseover", function () {
this.openInfoWindow(infoWindow);//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function () {
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});
marker.addEventListener("mouseout", function () {
this.closeInfoWindow(infoWindow);
});
}, 500);
},
geoEnter: function () {
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(this.BMapModalGeo, function (point) {
if (point) {
map.clearOverlays();
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
vue.BMapModalX = point.lng;
vue.BMapModalY = point.lat;
} else {
alert("您选择地址没有解析到结果!");
}
});
},
BMapModalButton: function () {
$("#BMapModal").modal("hide");
this.appX = this.BMapModalX;
this.appY = this.BMapModalY;
}
},
watch: {
BMapModalX: function (newQuestion,oldQuestion) {
map.clearOverlays();
var p = new BMap.Point(newQuestion, this.BMapModalY);
var marker = new BMap.Marker(p);
map.addOverlay(marker);
},
BMapModalY: function (newQuestion,oldQuestion) {
map.clearOverlays();
var p = new BMap.Point(this.BMapModalX,newQuestion);
var marker = new BMap.Marker(p);
map.addOverlay(marker);
}
}
});
// 创建地图实例
var map = new BMap.Map("container");
</script>
</body>
</html>
浙公网安备 33010602011771号