1.页面直接引入
<script charset="utf-8" src="http://map.qq/api/js?v=2.exp"></script>
//http://map.qq/api/js?v=2.exp 网址是API文件的位置,v2.0 指当前使用的API的版本标识。
2.在html页面插入地图模板
<div id="siteMap"></div>
3.我们需要的经纬度可以选择一部请求的方式从后台获取,然后转换显示在页面上,
但是我的demo的页面是jsp,所以数据是后台直接带到页面上的,这里直接处理就好:
4.JS部分:
参考腾讯官方API的 反地址解析 和 为多个Marker添加事件
$(".li-left-sitemap").addClass("active")
function siteMap() {
var center = new qq.maps.LatLng(39.916527,116.397128);
var map = new qq.maps.Map(document.getElementById("siteMap"), {
center: center,
zoom: 5
});
//地址和经纬度之间进行转换服务
geocoder = new qq.maps.Geocoder();
//设置城市信息查询服务
citylocation = new qq.maps.CityService();
//请求成功回调函数
citylocation.setComplete(function(result) {
map.setCenter(result.detail.latLng);
});
//请求失败回调函数
citylocation.setError(function() {
alert("出错了,请输入正确的经纬度!!!");
});
citylocation.searchLocalCity();
var infoWin = new qq.maps.InfoWindow({
map: map
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
var latlngs = new Array();
$(".siteData").each(function(){
var lat = $(this).find(".siteLat").html();
var lng =$(this).find(".siteLng").html();
latlngs.push(new qq.maps.LatLng(lat,lng));
})
for(var i = 0;i < latlngs.length; i++) {
geocoder.getAddress(latlngs[i]);
(function(n){
geocoder = new qq.maps.Geocoder({
complete : function(result){
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
qq.maps.event.addListener(marker, 'click', function() {
infoWin.open();
infoWin.setContent('<div style="width:100%;height:100%;">' +
result.detail.address + '</div>');
infoWin.setPosition(result.detail.location);
});
}
});
})(i);
}
}
更多详尽的信息,可直接参考腾讯官方API: http://lbs.qq/javascript_v2/demo.html
更多推荐
如何在腾讯地图绘制自己的坐标
发布评论