高德地图开放平台二次开发 JS API
2019-10-09 本文已影响0人
孤傲小狼
效果图
目的：根据公司的客户库，寻找周边客户，方便销售人员拜访
需求：定位，自定义寻找距离，手机端和pc端自适应，拖动地图异步加载客户情况，点击手机号码自动到拨号界面，链接客户主页，规划路线（次要），其他基础功能等
有疑问可以联系我一块交流，框架mvc+ef（和直接执行sql混用），主要源码如下：
html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<title>浏览器精确定位</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/diyCircularButton.css" rel="stylesheet" />@*自定义按钮效果*@
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key值"></script>
<script type="text/javascript">
/*这里采用淡入效果试试*/
$(function () {
$(".bt").css("opacity", "1");
});
/**/</script>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.info {
width: 26rem;
}
.amap-geolocation-con {
margin-bottom: 120px;
}
</style>
</head>
<body>
<div id='container'></div>
<div style="display :none">
<div id="coordinate">@ViewBag.coordinate</div>@*中心点坐标*@
<div id="cityname"></div>@*城市名称*@
<div id="origin">@ViewBag.origin</div>@*定位坐标*@
</div>
<div class="input-card" style="width:50px;margin-bottom:180px;height:9rem">
<div>
<div class="bt" style="margin-left:-9px">
<div class="button" id="butDistanceShow" data-toggle="modal" data-target="#setModal" data-afterContent="500"> </div>
<div style="clear:both"> </div>
</div>
<div class="bt" style="margin-left:-9px;margin-top:10px">
<div class="button" id="gruid" data-afterContent="路线"> </div>
<div style="clear:both"> </div>
</div>
<div class="input-item">
<div id="gruid" style="margin-left:-13px;"></div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="setModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="setModalLabel">
设置查询参数
</h4>
</div>
<div class="modal-body">
设置客户查询半径：
<select id="distanceSelect" style="width:200px">
<option value="500">500m</option>
<option value="1000">1km</option>
<option value="1500">1.5km</option>
<option value="2000">2km</option>
<option value="3000">3km</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary" onclick="distanceSelectChange()">
确定
</button>
</div>
</div>
</div>
</div>
<div class="info" id="info">
<h4 id='status'></h4><hr>
<p id='result'></p><hr>
<p>由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
</div>
<script>
//获取浏览器的宽度和高度大小
var isonresize = false;
if (isonresize == false) {
var widthheight = document.getElementById('container');
var diywidth = document.body.clientWidth;
var diyheight = document.body.clientHeight;
widthheight.style.width = diywidth + "px";
widthheight.style.height = diyheight + "px";
isonresize = true;
}
window.onresize = function () {
var widthheight = document.getElementById('container');
var diywidth = document.body.clientWidth;
var diyheight = document.body.clientHeight;
widthheight.style.width = diywidth + "px";
widthheight.style.height = diyheight + "px";
}
</script>
<script type="text/javascript">
//定位
var map = new AMap.Map('container', { resizeEnable: true, zoom: 20 });
AMap.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition: 'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点
});
map.addControl(geolocation);
//地图添加放大缩小、比例尺、鹰眼功能
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], function () {
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
map.addControl(new AMap.OverView({ isOpen: true }));
})
var iscoordinate = false;
geolocation.getCurrentPosition(function (status, result) {
if (status == 'complete') {
onComplete(result)
if (iscoordinate == false) {
var coordinatediv = document.getElementById('coordinate');
coordinatediv.innerHTML = result.position;
iscoordinate = true;
}
var citynamediv = document.getElementById('cityname');
citynamediv.innerHTML = result.addressComponent.city;
var origindiv = document.getElementById('origin');
origindiv.innerHTML = result.position;
} else {
onError(result)
}
});
});
//解析定位结果
function onComplete(data) {
document.getElementById('status').innerHTML = '定位成功'
var str = [];
str.push('定位结果：' + data.position);
str.push('定位位置：' + data.addressComponent.city);
str.push('定位类别：' + data.location_type);
if (data.accuracy) {
str.push('精度：' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('result').innerHTML = str.join('<br>');
}
//解析定位错误信息
function onError(data) {
document.getElementById('status').innerHTML = '定位失败'
document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
}
//获取当前地图的中心点并标记
var circleMarkerCount = 0;
var circleMarker;
function GetCircleMarker() {
if (circleMarkerCount == 1) {
map.remove(circleMarker); circleMarkerCount == 0;
} else {
circleMarkerCount++;
}
var center = map.getCenter();
circleMarker = new AMap.CircleMarker({
center: center,
radius: 10,//3D视图下，CircleMarker半径不要超过64px
strokeColor: 'white',
strokeWeight: 2,
strokeOpacity: 0,
fillColor: 'rgba(0,0,255,1)',
fillOpacity: 0.5,
zIndex: 10,
bubble: true,
cursor: 'pointer',
clickable: true,
})
circleMarker.setMap(map);
var coordinatediv = document.getElementById('coordinate');
coordinatediv.innerHTML = center;
map.getCity(function (info) {
var citynamediv = document.getElementById('cityname');
if (info.city != "") {
citynamediv.innerHTML = info.city;
} else {
citynamediv.innerHTML = info.province;
}
})
}
//查询周边客户并标记点
var markers = [];
var marker;
function GetCustomer(distance) {
var getcoordinatediv = document.getElementById('coordinate');
var coordinate = getcoordinatediv.innerHTML;//中心点坐标
var citynamediv = document.getElementById('cityname');
var cityname = citynamediv.innerHTML;//城市名
map.remove(markers)
var origin;//定位坐标
origin = document.getElementById('origin').innerHTML;
//var info = document.getElementById('info');
//info.style.display = 'none';
var str = [];
var CustomerInfo = [];
var index = 0;
var count = 0;
$.ajax({
type: "get",
url: '../Show/getEnterpriseLstResult',
data: { coordinate: coordinate, cityname: cityname, distance: distance },
ifModified: false,
async: true,//异步执行
cache: false, // 这里是关键
success: function (data) {
count = data.rows.length;
data.rows.forEach(function (item, i) {
var sexname = "先生";
if (item.Sex != 1) {
sexname = "女士"
}
CustomerInfo[index] = '名称：' + item.CompanyName + '<br />' + '卖家：' + item.SellerName + ' ' + '称呼：' + sexname + '<br />' + '手机号码：' + ' <a href=\"tel:' + item.MobilePhone + '\">' + item.MobilePhone + '</a>' + '<br />' + '联系方式：' + item.Telephone + '<br />' + '网址：' + ' <a href=\"' + item.HomePageUrl + '\" target="_blank">' + item.HomePageUrl + '</a>';
str[index] = item.MapCoordinates;
index++;
})
for (var i = 0; i < index; i += 1) {
marker = new AMap.Marker({
position: new AMap.LngLat(Getx(str[i]), Gety(str[i])),
title: "sdsaf",
map: map
});
marker.content = GetCustomerInfo(CustomerInfo[i]);
marker.on('click', markerClick);
marker.emit('click', { target: marker });
markers.push(marker)
}
var infodiv = document.getElementById('info');
infodiv.innerHTML = "寻找半径为：" + distance + "米，周边共有" + count + "个客户"
}
});
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
var Guide = document.getElementById('gruid');
var ssss = "sdfsadfsdf('" + origin + "','" + e.target.getPosition() + "')";
Guide.setAttribute('onclick', ssss)
//alert(ssss)
// Guide.innerHTML = "<a href='../Show/GuidedPlanning?origin=" + origin + "&position=" + e.target.getPosition() + "'>路线</a>";
}
//标记点自适应地图显示
//map.setFitView();
function Gety(str) {
var q = str.replace("+", "");
var w = q.split(',');
y = Number(w[0]);
return y;
}
function Getx(str) {
var q = str.replace("+", "");
var w = q.split(',');
x = Number(w[1]);
return x;
}
function GetCustomerInfo(CustomerInfo) {
return CustomerInfo;
}
}
function sdfsadfsdf(origin, Position) {
window.location.href = "../Show/GuidedPlanning?origin=" + origin + "&position=" + Position;
}
</script>
<script>
//自定义距离改变
function distanceSelectChange() {
var textSelect = document.getElementById('distanceSelect');
var butDistanceShow = document.getElementById('butDistanceShow');
butDistanceShow.setAttribute('data-afterContent', textSelect.value)
GetCircleMarker();
GetCustomer(textSelect.value)
$('#setModal').modal('hide');
$(".modal-backdrop").remove();
}
//加载地图拖动事件
window.onload = function () {
map.on('dragend', showInfoDragend);
}
function showInfoDragend() {
GetCircleMarker();
GetCustomer($("#butDistanceShow").attr("data-afterContent"))
}
</script>
</body>
</html>
css （diyCircularButton.css）代码:
* {
padding: 0;
margin: 0;
}
/* 清除浮动 */
.clearfix:after {
content: "";
display: table;
clear: both;
}
html, body {
height: 100%;
}
body {
font-family: "Microsoft YaHei";
background: #E1E1E1;
font-weight: 300;
font-size: 15px;
color: #333;
overflow: hidden;
}
a {
text-decoration: none;
}
/*按钮 阴影无扩展 */
.bt {
display: block;
width: 50px;
opacity: 0;
}
.button:before {
content: "";
width: 45px;
height: 45px;
display: block;
z-index: -1;
position: relative;
background: #ddd;
left: -4px;
top: -4px;
border-radius: 65px;
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}
.button:after {
content: attr(data-afterContent);
color: #09F;
font-size: 12px;
width: 100%;
height: 100%;
line-height: 38px;
text-align: center;
position: absolute;
top: 0;
display: block;
}
.button {
float: left;
cursor: pointer;
height: 38px;
width: 38px;
display: block;
position: relative;
color: black;
text-align: center;
line-height: 100px;
border-radius: 50px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
background: #FFF;
transition: all 0.5s ease-in;
}
.button {
float: left;
}
