百度地圖BMap使用示例
引入百度map js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak"/> 初始化百度地圖 map = new BMap.Map("mapdiv"); map.centerAndZoom(new BMap.Point(108.768241, 34.408032), 5); map.enableScrollWheelZoom(true); map.addControl(new BMap.NavigationControl());// 新增平移縮放控制元件 map.addControl(new BMap.ScaleControl()); // 新增比例尺控制元件 map.addControl(new BMap.OverviewMapControl()); //新增縮略地圖控制元件 var copyCtrl = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); map.setMinZoom(5); map.setMaxZoom(11); copyCtrl.addCopyright({ id: 1, content: "<span style='color:Red;font-size:16px;margin-right:10px;font-weight:bold'></span>" }); map.addControl(copyCtrl);
//map風格 map.setMapStyle({style:'light'}); var point = new BMap.Point("經緯度"); var marker = new BMap.Marker(point); marker.setIcon(new BMap.Icon("icon-path", new BMap.Size(24, 32))); //label樣式 var label = new BMap.Label("labcontent", {offset: new BMap.Size(25, -25)}); label.setStyle({ width: "120px;", color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微軟雅黑", background: "#676768", border: "1px solid '#ff8355'", borderRadius: "5px", textAlgin: "left", 'z-index': 999999 }); label.hide(); marker.setLabel(label); map.addOverlay(marker); marker.setAnimation(BMAP_ANIMATION_BOUNCE); var content = "";
//點選標註顯示內容 addClickHandler(content, marker);
//滑鼠懸浮顯示 addMarkerOverHandler(marker);
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content);
map.openInfoWindow(infoWindow, point);
}
//點選彈窗顯示
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
});
}
function addMarkerOverHandler(marker) {
marker.addEventListener("mouseover", function (e) {
marker.setTop(true);
if (marker.getLabel()) {
marker.getLabel().show();
}
});
marker.addEventListener("mouseout", function (e) {
marker.setTop(false);
if (marker.getLabel()) {
marker.getLabel().hide();
}
});
}