之前经常用百度地图，用在项目中发现和css代码冲突了，懒得去找冲突文，于是就找了下腾讯地图的api，给大家分享一下
官方网站：http://lbs.qq.com/javascript_v2/demo.html
我们看看demo，注意先要获取经纬度
获取经纬度的网址：http://lbs.qq.com/tool/getpoint/index.html
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
margin-top:10px;
overflow:hidden;
}
input#address{
width:300px;
}
#container {
min-width:603px;
min-height:767px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
var geocoder,map,marker = null;
var init = function() {
var center = new qq.maps.LatLng(23.045510,113.396790);
map = new qq.maps.Map(document.getElementById('container'),{
center: center,
zoom: 15
});
var anchor = new qq.maps.Point(10, 30);
var size = new qq.maps.Size(32, 30);
var origin = new qq.maps.Point(0, 0);
var icon = new qq.maps.MarkerImage('http://lbs.qq.com/javascript_v2/img/plane.png', size, origin, anchor);
size = new qq.maps.Size(52, 30);
var originShadow = new qq.maps.Point(32, 0);
var shadow =new qq.maps.MarkerImage(
'img/plane.png',
size,
originShadow,
anchor
);
var marker = new qq.maps.Marker({
icon: icon,
shadow: shadow,
map: map,
position:center,
animation: qq.maps.MarkerAnimation.BOUNCE
});
var jump = function(event) {
marker.setPosition(event.latLng);
};
qq.maps.event.addListener(map, 'click', jump);
//调用地址解析类
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
});
}
});
}
function codeAddress() {
var address = document.getElementById("address").value;
//通过getLocation();方法获取位置信息值
geocoder.getLocation(address);
}
</script>
<body onload="init()">
<div>
<input id="address" type="textbox" value="广州市番禺区大学城内环西路广州大学城 信息枢纽楼">
<button onclick="codeAddress()">search</button>
</div>
<div id="container"></div>
在对比一下百度的demo
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<div style="width:600px;height:450px;border:1px solid gray; float:left" id="MblogMap"></div>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("MblogMap");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.929803,22.521048);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
//标注点数组
var markerArr = [{title:"深圳市****有限公司",content:"地址:深圳市南山区**** <br/>电话:0755-****0 <br/>传真:0755-8****2<br/>邮箱:***@***h.com <br/>网址:www.****.com",point:"113.927965|22.52275",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();//创建和初始化地图
</script>
百度地图api接口地址：http://lbsyun.baidu.com/
辽公网安备:42900402000182号