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

简介:

一,后台添加标记


/*#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);
			});
		}


目录
相关文章
|
SQL 存储 JSON
微信朋友圈转发第三方网站带缩略图实现
前情提要 有时候我们会在朋友圈看到如下两种转发情况:一种是前面带缩略图的 ,一种是无缩略图的,当然有缩略图的不管是从用户体验,还是网站推广运营方都是更优的选择。 那我们看看微信分享朋友圈缩略图是 怎么一回事呢 注:微信6.5.5版本后,微信调整了分享规则。
1510 0
|
3天前
|
小程序 JavaScript 定位技术
微信小程序自动获取地理位置
微信小程序自动获取地理位置
22 0
|
3天前
|
定位技术 API 开发工具
uniapp使用腾讯地图进行地理定位
uniapp使用腾讯地图进行地理定位
122 0
|
3天前
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
3天前
|
小程序 定位技术 开发者
微信小程序如何获取地理位置
微信小程序如何获取地理位置
140 0
|
10月前
|
小程序 JavaScript 前端开发
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
460 0
|
10月前
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
291 0
|
10月前
|
小程序 JavaScript 定位技术
uniapp 配置chooseLocation微信小程序腾讯地图选点
uniapp 配置chooseLocation微信小程序腾讯地图选点
459 0
|
小程序 安全 定位技术
微信小程序:通过腾讯地图获取用户地理位置信息及其行政区域代码
微信小程序:通过腾讯地图获取用户地理位置信息及其行政区域代码
515 0
|
小程序 JavaScript 定位技术
微信小程序经纬度获取地图导航(导航接入第三方)
微信小程序经纬度获取地图导航(导航接入第三方)
330 0
微信小程序经纬度获取地图导航(导航接入第三方)