<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>地图</title> <script src="../js/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A0ypivVblFCZO0O6N8wpDI6qoCPoD0NX"></script> <script type="text/javascript"> $(function() { var map; initMap(); }); </script> <script type="text/javascript"> //创建和初始化地图函数： function initMap() { createMap(); //创建地图 setMapEvent(); //设置地图事件 addMapControl(); //向地图添加控件 addMapOverlay(); //向地图添加覆盖物 } function createMap() { map = new BMap.Map("map"); var point = new BMap.Point(114.074662, 22.65647); // 创建点坐标 map.centerAndZoom(point, 16); var loadCount = 0; map.addEventListener("tilesloaded", function() { if(loadCount == 1) { map.setCenter(point); } loadCount = loadCount + 1; }); } function setMapEvent() { map.enableScrollWheelZoom(); map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom() } function addClickHandler(target, window) { target.addEventListener("click", function() { target.openInfoWindow(window); }); } function addMapOverlay() { var markers = [{ content: "", title: "深圳找房网络科技有限公司", imageOffset: { 0, height: 3 }, position: { lat: 22.656516, lng: 114.07468 } }]; for(var index = 0; index < markers.length; index++) { var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat); var marker = new BMap.Marker(point, { icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), { imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height) }) }); var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) }); var opts = { 200, title: markers[index].title, enableMessage: false }; var infoWindow = new BMap.InfoWindow(markers[index].content, opts); marker.setLabel(label); addClickHandler(marker, infoWindow); map.addOverlay(marker); }; } //向地图添加控件 function addMapControl() { var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(navControl); } </script> <style> #map { width: 100%; height: 550px; border: #ccc solid 1px; font-size: 12px; margin-top: 30px; } </style> </head> <body> <div id="map"></div> </body> </html>