如何在网站中使用腾讯地图

简介:

一,后台添加标记


/*#latlng是经纬度的文本框*/
/*#title是地址的文本框*/
/*获取地址需要你的应用开启webservice*/
qq.maps.event.addListener(map, "click", function (e) {
			$('#latlng').val(e.latLng.getLng().toFixed(6) + "," + e.latLng.getLat().toFixed(6));
			url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key=ukey&output=jsonp&&callback=?");
			$.get(url3, function (result) {
				if(result.result!=undefined){
					$('#title').val(result.result.address);
				}
			})
		});

二,前台显示标记


/*data_info是服务器获取的标记数据集*/
/*item.content是后台添加的自定义内容*/
data_info =  jQuery.parseJSON($(".val").val());
		for(var i=0;i<data_info.length;i++){
			var item = data_info[i];
			var mkr  = new qq.maps.LatLng(item.lat,item.lng);
			var marker = new qq.maps.Marker({
				position: mkr,
				map: map
			});
			var title = item.title;
			var content = item.content;
			addClickHandler(title,content,marker);
			
		}
		function addClickHandler(title,content,marker){
			qq.maps.event.addListener(marker, 'click', function(){
				info.open();
			    info.setContent('<div class="popinf"><h4>'+title+'</h4>'+content+'</div>');
			    info.setPosition(marker);
			});
		}


目录
相关文章
|
新能源 图形学
一次大一新生打化工设计大赛的经历(附参赛过程、方法)
一次大一新生打化工设计大赛的经历(附参赛过程、方法)
633 1
|
Web App开发 小程序 iOS开发
Fiddler - 抓包手机App、微信小程序等网络请求
Fiddler - 抓包手机App、微信小程序等网络请求
1592 0
Fiddler - 抓包手机App、微信小程序等网络请求
|
Python
Django进行grpc通信
Django进行grpc通信
470 0
PbootCMS自定义前台404错误页面
PbootCMS自定义前台404错误页面
901 0
PbootCMS自定义前台404错误页面
|
弹性计算 缓存 数据库
2024年阿里云2核4G服务器一年多少钱?轻量165元,ECS云服务器199元
2024年阿里云2核4G服务器一年多少钱?轻量165元,ECS云服务器199元
electron-vue 窗体禁止拖拽
electron-vue 窗体禁止拖拽
242 0
|
缓存 前端开发 数据库
服务器硬件基础知识
服务器硬件基础知识
336 0
|
API Android开发
技术经验分享:Android系统开发获取userId
技术经验分享:Android系统开发获取userId
349 0
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
缓存 监控 Ubuntu
Linux Command BCC 性能监视、网络动态跟踪工具
Linux Command BCC 性能监视、网络动态跟踪工具