在網頁中嵌入帶標識的百度地圖

時間 2019-11-10

標籤網頁嵌入帶標識百度地圖欄目 HTML 简体版

原文原文鏈接

最近在作一個網站，須要嵌入經銷商的位置和信息。搜索了不少資料，終於完成了功能，給你們分享一下。
地圖功能：按標尺縮放，鼠標滑動縮放，添加標註和信息。
具體步驟：
1：首先到百度地圖API，申請密鑰。（若是沒有百度帳戶得先註冊一個）
2：百度地圖API的功能作得比較分散，像標註、縮放等都是須要本身一步步找代碼的。我把代碼整理了一下，給你們複製一下，應該是最簡潔的了
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=申請的密鑰"></script>
</head>
<body>
<div style="width:500px;height:500px;margin:0 auto" id="allmap"></div>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.384, 39.987);  // 須要標註的位置的經緯度
    map.centerAndZoom(point, 15);  // 中心位置和縮放倍數
    map.enableScrollWheelZoom();   // 添加滾動軸
    map.addControl(new BMap.NavigationControl());   // 添加左上角的標尺工具
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("北京");

    var opts = {
         width : 200,     // 信息窗口寬度
        height: 20,     // 信息窗口高度
         title : "健翔橋東華亭家園"  // 信息窗口標題
    }
    var infoWindow = new BMap.InfoWindow("xxx公司", opts);  // 建立信息窗口對象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打開信息窗口
    var marker = new BMap.Marker(point);        // 建立標註,即地圖上的小紅點
    map.addOverlay(marker);
</script>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。