<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>项目地图</title>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你的key"></script>
<script src="http://open.map.qq.com/apifiles/2/4/79/main.js" type="text/javascript"></script>
<script src="/Scripts/plugins/jQuery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="/Scripts/plugins/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<link href="/App_Themes/Default/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.map-seach {
background: #50a4ec;
padding: 5px 20px;
color: #fff;
display: inline-block;
}
.map-seach:active {
background: rgba(80, 164, 236, 0.4);
}
</style>
</head>
<body>
<div id="toolbar">
<div class="form-group">
<div class="box-group" style="float: left;">
<div class="font-style">
<span>
<i class="fa fa-pencil"></i>
经度:
</span>
</div>
<input type="text" class="form-control" id="longitude" name="longitude" value="">
</div>
<div class="box-group" style="float: left">
<div class="font-style">
<span>
<i class="fa fa-pencil"></i>
纬度:
</span>
</div>
<input type="text" class="form-control" id="latitude" name="latitude" value="">
</div>
<div class="box-group">
<div class="font-style">
<span>
<i class="fa fa-map-o"></i>
详细地址:
</span>
</div>
<input type="text" id="address" class="form-control box-wight" value="">
</div>
<div id="mapseacrh" class="btn btn-primary">搜索</div>
<div id="confirm" type="button" class="btn btn-primary">确定</div>
</div>
</div>
<div id="container" style="width:100%;height:500px;"></div>
<script>
var lat="", lng="";
$(function () {
var geocoder, citylocation, map, marker, label = null;
var center = new qq.maps.LatLng(19.940433, 110.362473);
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
label = new qq.maps.Label({
map: map,
offset: new qq.maps.Size(15, -12),
draggable: false,
clickable: false
});
geocoder = new qq.maps.Geocoder({
complete: function (result) {
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
}
});
marker = new qq.maps.Marker({
position: new qq.maps.LatLng(lat, lng),
map: map
});
if (lat == '' || lng == '') {
citylocation = new qq.maps.CityService({
complete: function (result) {
map.setCenter(result.detail.latLng);
}
});
citylocation.searchLocalCity();
}
qq.maps.event.addListener(map, 'click', function (event) {
marker.setMap(null);
document.getElementById("longitude").value = event.latLng.getLng().toFixed(6);
document.getElementById("latitude").value = event.latLng.getLat().toFixed(6);
var url = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + event.latLng.getLat() + "," + event.latLng.getLng() + "&key=你的key&output=jsonp&&callback=?");
$.getJSON(url, function (result) {
if (result.result != undefined) {
document.getElementById("address").value = result.result.address;
} else {
document.getElementById("address").value = "";
}
})
marker = new qq.maps.Marker({
position: new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()),
map: map
});
});
qq.maps.event.addListener(map, "mousemove", function (e) {
var latlng = e.latLng;
label.setPosition(latlng);
label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
});
geocoder = new qq.maps.Geocoder({
complete: function (result) {
marker.setMap(null);
map.setCenter(result.detail.location);
marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
document.getElementById("latitude").value = marker.position.lat;
document.getElementById("longitude").value = marker.position.lng;
}
});
$("#mapseacrh").click(function () {
geocoder.getLocation($("#address").val());
});
$("#address").bind("input propertychange change", function (event) {
geocoder.getLocation($("#address").val());
});
$("#address").keypress(function (e) {
if (e.which == 13) geocoder.getLocation($("#address").val());
});
$("#confirm").click(function () {
lng = document.getElementById("longitude").value;
lat = document.getElementById("latitude").value;
ComToolsCloseWindow("ok", null);
});
});
</script>
</body>
</html>
<style>
.font-style {
display: inline-block;
font-size: 20px;
padding: 1px 10px;
font-weight: 600;
color: #4f5155;
}
.font-style span {
float: right;
}
.form-control {
width: 120px;
float: right;
}
.box-group {
padding: 5px;
float: left;
}
#toolbar {
padding: 10px 30px;
background: rgba(136, 195, 214, 0.89);
}
.box-wight {
width: 300px;
}
.btn-primary {
width: 80px;
margin-left: 30px;
margin-top: 3px;
padding: 4px 10px;
background: #f2f1ed;
color: #4f5155;
border: 0px solid #87c0d1;
font-size: 20px;
font-weight: 600;
letter-spacing: 2px;
}
.btn-primary:hover {
background: #ff9b08;
opacity: 0.8;
}
.btn-primary:active {
background: #ff9b08;
color: white;
}
</style>
|
