百度地圖開發示例：位置標註，標註點彈框
阿新 • • 發佈：2019-02-08
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height
<body> <div id="allmap"></div></body>
</html><script type="text/javascript"> var baidumap = function () {
var map;
function init() { // 百度地圖API功能 map = new BMap.Map("allmap"
//新增地圖型別控制元件 map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] })); map.setCurrentCity("西安"); // 設定地圖顯示的城市 此項是必須設定的 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
//標記地圖位置 function addMarker(point) { var marker = new BMap.Marker(point); map.addOverlay(marker); }
var mapData = GetMapData(); //獲取位置資料
for (i = 0; i < mapData.length; i++) { var dataIndex = mapData[i]; var point = new BMap.Point(dataIndex.Point.longitude, dataIndex.Point.Latitude);
var marker = new BMap.Marker(point); map.addOverlay(marker);
addClickHandler(dataIndex, marker); }
}
function addClickHandler(dataIndex, marker) { marker.addEventListener("mouseover", function (e) { openInfo(dataIndex, e) } ); marker.addEventListener("mousemove", function (e) { debugger; $('.BMap_pop>img').trigger('click'); // map.closeInfoWindow(infoWindow,point); //開啟資訊視窗 } );
}
function openInfo(dataIndex, e) { var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(dataIndex.message, { width: 200, // 資訊視窗寬度 height: 100, // 資訊視窗高度 title: dataIndex.title, // 資訊視窗標題 enableMessage: true,//設定允許資訊窗傳送短息 message: dataIndex.message }); // 建立資訊視窗物件 map.openInfoWindow(infoWindow, point); //開啟資訊視窗 }
function GetMapData() { var mapData = [ { "key": "1", "name": "北京市市中心", "Point": { "longitude": 116.41667, "Latitude": 39.91667 }, "title": "北京市市中心", "message": "親耐滴，歡迎來到北京市市中心喔~" }, { "key": "2", "name": "上海市區", "Point": { "longitude": 121.43333, "Latitude": 34.50000 }, "title": "上海市區", "message": "親耐滴，歡迎來到上海市區喔~" }, { "key": "3", "name": "天津市區", "Point": { "longitude": 117.20000, "Latitude": 39.13333 }, "title": "天津市區", "message": "親耐滴，歡迎來到天津市區喔~" }, { "key": "4", "name": "香港經", "Point": { "longitude": 114.10000, "Latitude": 22.20000 }, "title": "香港經", "message": "親耐滴，歡迎來到香港經喔~" }, { "key": "5", "name": "廣州經", "Point": { "longitude": 113.23333, "Latitude": 23.16667 }, "title": "廣州經", "message": "親耐滴，歡迎來到廣州經喔~" }, { "key": "6", "name": "珠海經", "Point": { "longitude": 113.51667, "Latitude": 22.30000 }, "title": "珠海經", "message": "親耐滴，歡迎來到珠海經喔~" }, { "key": "7", "name": "深圳經", "Point": { "longitude": 114.06667, "Latitude": 22.61667 }, "title": "深圳經", "message": "親耐滴，歡迎來到深圳經喔~" }, { "key": "8", "name": "杭州經", "Point": { "longitude": 120.20000, "Latitude": 30.26667 }, "title": "杭州經", "message": "親耐滴，歡迎來到杭州經喔~" }, { "key": "9", "name": "重慶市區", "Point": { "longitude": 106.45000, "Latitude": 29.56667 }, "title": "重慶市區", "message": "親耐滴，歡迎來到重慶市區喔~" }, ]
return mapData; }
return { Init: init };
}();
$(function () { baidumap.Init(); });
</script>