腾讯地图 省市县门店数量及信息标记显示
来源:互联网 发布:js validate取消验证 编辑:程序博客网 时间:2024/06/07 03:23
话不多说,先上图:
1.点击省份显示市级信息标记,点击市显示区县信息标记
2.缩放到市级级别时显示市级信息标记,缩放到区县级别时显示区县信息标记
(PS:此技术也可以用来开发仿滴滴打车软件里的显示附近车辆位置等功能的开发)
技术选取
地图插件选择腾讯地图(公司方面的原因),标记选择腾讯地图自带的覆盖物标记(腾讯自带的点聚合可以实现聚合显示数量,但功能不适合此功能开发)
技术实现
初始化
初始进入门店区域分布页面,初始化地图,缩放zoom=5(省级),js从后台抓取所有以省份为整体的门店数量数据,然后把标记(带上门店数量)渲染到地图的相关省上,并初始化map.zoom_changed这个监听事件(此方法监听地图缩放级数变化),初始化标记mark的clickable_changed事件(此方法监听标记被点击的事件)
1.缩放地图事件监听
1. 当zoom∈(5,8),地图标记不变化。
2. 当zoom = 8 时,清除所有省份标记,js调用map. getCenter()来获取地图中心坐标,在通过javascript地址解析逆向获取中心地址省份名称,js从后台拿到该省的以市级为整体的门店数量数据,然后把标记(带上门店数量)渲染到地图的相关市上。
3. 当zoom∈(8,11),地图标记不变化。
4. 当zoom = 11 时,清除所有市级标记,js调用map. getCenter()来获取地图中心坐标,在通过javascript地址解析逆向获取中心地址市级名称,js从后台拿到该市的所有区县门店坐标信息,创建位置标记对象,然后把标记渲染到地图上。
5. 当zoom∈(11,18),地图标记不变化。
2.点击标记事件监听
1. 当省份标记被点击时,清除所有省份标记,js从后台拿到该省的以市级为整体的门店数量数据,创建位置标记对象,然后把标记(带上门店数量)渲染到地图的相关市上,zoom调整到8。
2. 当市级标记被点击时,清除所有市级标记,js从后台拿到该市的所有区县门店坐标信息,创建位置标记对象,然后把标记渲染到地图上,zoom调整到11。
代码实现
一、JS引入
1. 引入腾讯地图API JS
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=your key"></script>
2. 引入loading加载JS
<script charset="utf-8" src="jquery.mloading.js"></script>
二、功能方法
1. 初始化方法
//进入页面初始化地图function init(){ let current_zoom = 5; let map = initMap(current_zoom); renderMarkersAndLabels(map,1,data,bindEventLevelOneMarkers);}
2. 初始化地图
/** * 初始化地图 * @param zoom 缩放级别,默认为5 * @param latLng 坐标对象 */function initMap(zoom,latLng){ //以北京为中心 let center = new qq.maps.LatLng(39.916527,116.397128); if(!zoom){ zoom = 5 } if(latLng){ center = latLng } //初始化地图 let map = new qq.maps.Map(document.getElementById("container"), { // 地图的中心地理坐标。 center: center, zoom: zoom }); map.panTo(center); bindZoomSwithListener(map); //显示loading组件 $("#container").mLoading("show"); current_zoom = zoom; return map;}
3. 渲染标记和标签方法
/** * 渲染标记和标签 * @param map map地图对象 * @param level 地图级别 1:省级 2:市级 3:区县级 * @param data json数据 * @param markerClickCallback 标记点击事件方法回调函数 */function renderMarkersAndLabels(map,level,data,markerClickCallback){ for(let i = 0 ; i < data.length ; i++ ){ let d = data[i]; if(d.position){ let x = d.position.split(",")[0]; let y = d.position.split(",")[1]; let marker = new qq.maps.Marker({ position: new qq.maps.LatLng(parseFloat(x),parseFloat(y)), animation:qq.maps.MarkerAnimation.DROP, map: map }); //分三级主要是针对不同级别显示不同的标签,这里可根据自己系统要求自行定制content if(level == 1){ let label = new qq.maps.Label({ position: new qq.maps.LatLng(parseFloat(x),parseFloat(y)), map: map, content:d.provinceName + ":" + d.shopNum }); } else if(level == 2){ let label = new qq.maps.Label({ position: new qq.maps.LatLng(parseFloat(x),parseFloat(y)), map: map, content:d.cityName + ":" + d.shopNum }); } else if(level == 3){ let label = new qq.maps.Label({ position: new qq.maps.LatLng(parseFloat(x),parseFloat(y)), map: map, content:"门店名称:" + d.shopName +"<br>门店地址:" + d.shopAddress + "<br>门店电话:" + d.shopTelephone }); } //初始化标记点击事件 if(markerClickCallback){ markerClickCallback(marker); } } } $("#container").mLoading("hide");}
4. 逆向解析坐标方法
/** * 逆向解析坐标方法 * @param map map地图对象 * @param level 地图级别 1:省级 2:市级 3:区县级 */function converseAnalysis(map,level) { if(level == 2){ let geocoder = new qq.maps.Geocoder({ complete : function(result){ //获得省份,缩放到市级 let province = result.detail.addressComponents.province; params.province = province; permissionService.getCityList(params).then((data)=>{ renderMarkersAndLabels(map,2,data,bindEventLevelTwoMarkers); }); } }); geocoder.getAddress(map.center); } else if(level == 3){ let geocoder = new qq.maps.Geocoder({ complete : function(result){ //获得城市,缩放到区县级 let city = result.detail.addressComponents.city; params.city = city; permissionService.getDistrictList(params).then((data)=>{ renderMarkersAndLabels(map,3,data); }); } }); geocoder.getAddress(map.center); }}
5. 初始化地图时获取所有省份门店信息方法
function getProvincesData(map){ permissionService.getList(params).then((data)=>{ renderMarkersAndLabels(map,1,data,bindEventLevelOneMarkers); });}
6. 设置省级和市级标记点击事件方法
/** * 设置市级标记点击事件 * @param marker 标记对象 */function bindEventLevelTwoMarkers(marker) { qq.maps.event.addListener(marker, 'click', function() { let _this = $(this); let center = new qq.maps.LatLng(_this[0].position.lat, _this[0].position.lng); //显示loading组件 $("#container").mLoading("show"); //逆向地址解析 let geocoder = new qq.maps.Geocoder({ complete : function(result){ //获得城市 let city = result.detail.addressComponents.city; params.city = city; permissionService.getDistrictList(params).then((DistrictData)=>{ //创建地图中心坐标 let newMap = initMap(11,center); current_zoom = 11; renderMarkersAndLabels(newMap,3,DistrictData,null); }); } }); geocoder.getAddress(center); });}/** * 设置省级标记点击事件 * @param marker 标记对象 */function bindEventLevelOneMarkers(marker) { qq.maps.event.addListener(marker, 'click', function() { let _this = $(this); let center = new qq.maps.LatLng(_this[0].position.lat, _this[0].position.lng); //显示loading组件 $("#container").mLoading("show"); //逆向地址解析 let geocoder = new qq.maps.Geocoder({ complete : function(result){ //获得省份 let province = result.detail.addressComponents.province; params.province = province; permissionService.getCityList(params).then((cityData)=>{ let newMap = initMap(8,center); current_zoom = 8; renderMarkersAndLabels(newMap,2,cityData,bindEventLevelTwoMarkers); }); } }); geocoder.getAddress(center); });}
7. 设置省级和市级标记点击事件方法
/** * zoom切换监听事件 * @param map map地图对象 */function bindZoomSwithListener(map) { qq.maps.event.addListener(map, 'zoom_changed', (tempMap) => { //从一级跳二级 if(tempMap.target.zoom == 8 && current_zoom == 7 ){ let newMap = initMap(8,tempMap.target.center); converseAnalysis(newMap,2); } //从二级跳三级 else if(tempMap.target.zoom == 11 && current_zoom == 10){ let newMap = initMap(11,tempMap.target.center); converseAnalysis(newMap,3); } //从三级跳二级 else if(tempMap.target.zoom == 8 && current_zoom == 9){ let newMap = initMap(8,tempMap.target.center); converseAnalysis(newMap,2); } //从二级跳一级 else if(tempMap.target.zoom == 5 && current_zoom == 6){ let newMap = initMap(5,tempMap.target.center); getProvincesData(newMap); } current_zoom = tempMap.target.zoom; });}
- 腾讯地图 省市县门店数量及信息标记显示
- 腾讯地图标记点击事件
- 商品以省市方式显示百分比数量
- 百度地图 省市区县 信息展示
- Echarts 地图处理 省市交互 显示景点
- 地图显示周边信息
- 【leaflet】地图显示、标记、图层切换
- 高德地图1---地图加载、标记地点、信息窗体
- 腾讯地图根据城市 地名 检索信息
- 谷歌地图API 显示地图添加maker点,信息窗体及事件
- 划过地图进行地图属性信息显示
- ecshop 订单确认中显示省市地址信息的方法
- 安卓高德地图附近信息点Poi与标记Marker
- 百度地图_根据地图上标记位置获取街道信息,以及经纬度信息
- 地图:腾讯地图集成过程及开发建议
- 百度地图开发只显示网格不显示地图信息
- 百度地图之调用javaScript api接口实现多点标注及显示提示信息
- Android百度地图开发(三)多标注及对应信息弹窗显示
- 测试用例基本概念
- 计蒜客-2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛-H-Skiing
- Django06_model field
- UVa213 Message Decoding
- [日推荐]『单身脱脱脱』给单身狗发福利啦!
- 腾讯地图 省市县门店数量及信息标记显示
- Oracle中的存储过程简单例子
- 【干货收藏】数据库技术百问_数据库从起步到进阶必备
- GHO文件转iso文件能启动安装
- 定义View元素和他们的属性
- iOS应用层加密相关
- HDFS读写流程
- Keymaster/ROT/MOTA功能的关联
- 多表查询