先上圖看效果-----------根據經緯度動態加載地圖標記，根據經緯度位置動態加載半徑圈出範圍，點擊標記顯示當前標記信息
代碼圖：
首先引用加載騰訊地圖官網示例地址：
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纔會在地圖上去加載顯示標記 等，所以測試看效果的時候需要將代碼調整下，不需要去調後端接口拿數據因爲你們現在還沒這個接口，直接加載顯示標記先看效果》》》》》