先上图看效果-----------根据经纬度动态加载地图标记，根据经纬度位置动态加载半径圈出范围，点击标记显示当前标记信息
代码图：
首先引用加载腾讯地图官网示例地址：
https://lbs.qq.com/javascript_v2/demo.html
https://lbs.qq.com/javascript_v2/case-run.html#sample-overlay-marker2
需要什么功能可以参考官方API示例
---------------------------------------下面本人自己使用的代码-------------------------
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/pages/common/taglibs.jsp" %>
<c:set var="rootTitleName" value="前置仓"/>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/pages/common/mainCss.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简单地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
min-width:600px;
min-height:800px;
}
</style>
</head>
<body onload="init()">
<div class="main game-list">
<div class="main-top">
<h3>所有${rootTitleName} <small>共<span>${apiRsp.count}</span>个</small></h3>
<form class="form-inline pull-right search-box" id="editForms" method="post" >
<div class="form-group">
<select class="form-control" name="provinceId" id="provinceId" style="width:130px; ">
<option value="">--省份--</option>
<c:forEach items="${provinceList}" var="item">
<option value="${item.id}" >${item.name}</option>
</c:forEach>
</select>
</div>
<div class="form-group">
<select class="form-control" name="cityId" id="cityId" style="width:130px; ">
<option value="">--城市--</option>
<c:forEach items="${cityList}" var="item">
<option value="${item.id}" >${item.name}</option>
</c:forEach>
</select>
</div>
<div class="form-group">
<select class="form-control" name="districtId" id="districtId" style="width:145px;">
<option value="">--区/县--</option>
<c:forEach items="${districtList}" var="item">
<option value="${item.id}" >${item.name}</option>
</c:forEach>
</select>
</div>
<%--<div class="form-group">--%>
<%--<select name="status" id="status" class="form-control">--%>
<%--<option value="">--状态--</option>--%>
<%--<option value="published" <c:if test="${status=='published'}"> selected='selected' </c:if>>上架</option>--%>
<%--<option value="unpublished" <c:if test="${status=='unpublished'}"> selected='selected' </c:if>>下线</option>--%>
<%--<option value="draft" <c:if test="${status=='draft'}"> selected='selected' </c:if>>草稿</option>--%>
<%--</select>--%>
<%--</div>--%>
<input type="text" class="form-control" name="searchKeys" id="searchKeys" value="${searchKeys}" autocomplete="off" placeholder="输入前置仓名称进行搜索">
<c:set var="pagingUrl" value="${ctx}/content/shop/maplist?searchKeys=${searchKeys }&status=${status }"/>
<%--<button id="submitSelect" name="submitSelect" class="btn btn-default">搜索</button>--%>
<a onclick="submitSelect()" style="width: 60px;height: 30px" role="button" class="btn btn-primary">搜索</a>
</form>
</div><!--main-top-->
<div id="container"></div>
</div><!--main end-->
<%@ include file="/WEB-INF/pages/common/mainFooter.jsp" %>
<script src="${ctx}/static/js/chosen_v1.8.5/chosen.jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/static/js/area.select.js?v=${resourceVersion}" type="text/javascript"></script>
<%--引用腾讯地图--%>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=K7GBZ-IDICX-EAV42-TCWMK-BMNRO-ENFPN&sig=4c07F3oIG2jaySjzovCdFQc7BNb4Ly"></script>
<script>
//initSelect('${ctx}');
/*默认加载地图现在的中心位置*/
var defaultLat=31.231194;
var defaultLng=121.412064;
var zoom=13;
var msgFlg=1;
var areaName=$('#districtId option:selected').text();
/*下拉列表改变事件*/
$("#districtId").change(function(){
var districtIdVal=$('#districtId option:selected').val();
areaName=$('#districtId option:selected').text();
msgFlg=2;
ajaxSubmit("${ctx}/content/getRangeData",{areaId:districtIdVal},returnSubmitSelectCallback,null,null,returnSubmitSelectCallback);
// zoom=30;
// init();
}) ;
/*搜索按钮事件*/
function submitSelect(){
var inputVal=document.getElementById("searchKeys").value;
if(inputVal===''){
}else{
msgFlg=1;
ajaxSubmit("${ctx}/content/getRangeData",{inputVal:inputVal},returnSubmitSelectCallback,null,null,returnSubmitSelectCallback);
}
}
/*地图加载事件*/
var init = function() {
//加载地图显示的中心位置
var center = new qq.maps.LatLng(defaultLat,defaultLng);
//地图控件
var map = new qq.maps.Map(document.getElementById('container'),{
center: center,
zoom: zoom
});
//添加到提示窗
var info = new qq.maps.InfoWindow({map: map});
//自定义标记图标
var anchor = new qq.maps.Point(6, 6), size = new qq.maps.Size(24, 24), origin = new qq.maps.Point(0, 0), icon = new qq.maps.MarkerImage('https://lbs.qq.com/javascript_v2/img/center.gif', size, origin, anchor);
/*获取前置仓经纬度动态加载*/
getShopLngLat();
/*获取前置仓经纬度*/
function getShopLngLat(){
ajaxSubmit("${ctx}/content/getRangeData",{id:1},returnCallback,null,null,returnCallback);
}
/*处理getShopLngLat返回结果 动态加载显示对应前置仓范围标记*/
function returnCallback(event,param){
var apiRsp=getApiJson(param.data);
if(apiRsp && apiRsp.isSuccess){
var list=apiRsp.results;
//这是静态数据 可以用来测试看效果
var result = { "code":0, "msg":"success", "data":[ {"id":1,"name":"第5个商铺","locate":"广东省深圳市龙岗区阪田五和大道与吉华路交汇处","latitude":"39.9254100000", "longitude":"116.5220000000"}, {"id":2,"name":"我是最远的","locate":"北京市防过热合同然后他忽然北京市防过热合同然后他忽然北京市防过热合同然后他忽然","latitude":"39.91800000", "longitude":"116.518000000"}, {"id":3,"name":"最近的商铺","locate":"辽宁省个合同然后他发热感惹发热个体个体","latitude":"39.9244100000", "longitude":"116.5174500000"}, {"id":4,"name":"第4个商铺","locate":"第4个第4个第4个第4个第4个第4个","latitude":"39.92600000", "longitude":"116.5194500000"}, {"id":5,"name":"第二近的商铺","locate":"第5个第5个第5个第5个第5个第5个","latitude":"39.92300000", "longitude":"116.5200000000"}]};
for(var i=0; i<result.data.length; i++){
var data = result.data[i];
var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(data.latitude, data.longitude), map: map }); //创建标记
//***将必要的数据存入每一个对应的marker对象
marker.id = data.id;
marker.name = data.name;
marker.locate = data.locate;
qq.maps.event.addListener(marker, 'click', function() { //获取标记的点击事件
info.open(); //点击标记打开提示窗
info.setContent('<div class="mapInfo"><p class="center">'+this.name+'</p><p>'+this.locate+'</p><button type="button" "bindShop(\''+this.id+','+this.position.lat+','+this.position.lng+'\')">绑定商铺</button></div>'); //***设置提示窗内容（这里用到了marker对象中保存的数据）
info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng)); //提示窗位置
});
}
// 动态后台加载的数据 测试看效果时将此for 注释
// for(var i=0;i<list.length;i++){
// var deliveryRadius=list[i].deliveryRadius+'00';
// var shopName=list[i].name;
// var sig=new qq.maps.LatLng(list[i].lat,list[i].lng);//经纬度
// var marker=new qq.maps.Marker({icon: icon, position: sig, map: map});//创建标记
// marker.id = i;
// marker.name = shopName;
// new qq.maps.Circle({center:sig,radius: parseInt(deliveryRadius), map: map});//设置圆形范围
// qq.maps.event.addListener(marker, 'click', function() { //获取标记的点击事件
// info.open(); //点击标记打开提示窗
// info.setContent('<div class="mapInfo"><p class="center">'+this.name+'</p></div>'); //***设置提示窗内容（这里用到了marker对象中保存的数据）
// info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng)); //提示窗位置
// });
//
// }
}else{
layer.msg('系统地图出错',{icon: 5}, function() {
});
}
}
}
/*处理submitSelect时间返回结果*/
function returnSubmitSelectCallback(event,param){
var apiRsps=getApiJson(param.data);
if(apiRsps && apiRsps.isSuccess){
defaultLat=apiRsps.results.lat;
defaultLng=apiRsps.results.lng;
zoom=14;
init();
}else {
// if(msgFlg==1){
// layer.msg('当前搜索无对应前置仓',{icon: 5}, function() {
// });
// }else if(msgFlg==2){
// layer.msg('当前'+areaName+'区域无对应前置仓',{icon: 5}, function() {
// });
// }
}
}
</script>
</body>
</html>
主要代码块：
ps:因为我是的数据是动态从后台加载拿到的，一加载页面就会去后端拿数据。只有拿到数据返回true才会在地图上去加载显示标记 等，所以测试看效果的时候需要将代码调整下，不需要去调后端接口拿数据因为你们现在还没这个接口，直接加载显示标记先看效果》》》》》