百度地圖API （1）:往地圖中添加標註點

原創 大大大大南子 2020-06-09 03:42

自己項目中實踐：

列表展示：

<head>
    <style type="text/css">
        #allmap {width: 600px;height: 400px;overflow: hidden;margin:0;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=40GWXiduhOft266lK4N1dopL"></script>
</head>
<body>
<table
    <tbody>
        <tr>
            <th class="center" style="vertical-align: middle">地址</th>
            <td style="vertical-align:top;" colspan="2">
                <input type="hidden" id="CMP_LOC" value="${var.CMP_LOC} ${var.CMP_NAME}" title="地址">
                <input type="hidden" id="LONGITUDE" value="${var.LONGITUDE}" title="經度">
                <input type="hidden" id="LATITUDE" value="${var.LATITUDE}"  title="緯度">
                <input type="hidden" id="PZOOM" value="${var.PZOOM}"  title="拉伸">
                <div id="allmap"></div>
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
	// 百度地圖API功能
	var map = new BMap.Map("allmap");
	map.enableScrollWheelZoom();    //啓用滾輪放大縮小，默認禁用

	map.addControl(new BMap.ScaleControl());// 添加默認比例尺控件
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));// 右上
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));// 左下
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));// 右下

	map.addControl(new BMap.NavigationControl());  //添加默認縮放平移控件
	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，僅包含平移和縮放按鈕
	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，僅包含平移按鈕
	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，僅包含縮放按鈕

	//創建跳動的位置圖標
	var point = new BMap.Point($("#LONGITUDE").val(), $("#LATITUDE").val());
	map.centerAndZoom(point, $("#PZOOM").val());
	var marker = new BMap.Marker(point);  // 創建標註
	map.addOverlay(marker);               // 將標註添加到地圖中
	//添加監聽事件
	(function() {
		marker.addEventListener('click',
				//顯示信息的方法
				function() {
					showInfo(this,point);
				});
	})();
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
	function showInfo(thisMarker,point) {
		//獲取點的信息
		var sContent = '<span style="width: 200px;display: inline-block;">'+$("#CMP_LOC").val()+'</span>';
		var infoWindow = new BMap.InfoWindow(sContent); //創建信息窗口對象
		thisMarker.openInfoWindow(infoWindow); //圖片加載完後重繪infoWindow
	}
	</script>
</body>

頁面編輯 地圖選點：

<tr>
    <td style="width:79px;text-align: right;padding-top: 13px;">經度:</td>
    <td><input type="number" name="LONGITUDE" id="LONGITUDE" value="${pd.LONGITUDE }" maxlength="200" placeholder="這裏輸入經度" title="經度" style="width:98%;"/></td>
    <td rowspan="2" style="width:79px;vertical-align: middle;padding-right: 15px;">
        <a class="btn btn-app btn-light btn-xs"  οnclick="openMap();"><i class="ace-icon fa fa-globe"></i>地圖選點</a>
    </td>
</tr>
<tr>
    <td style="width:79px;text-align: right;padding-top: 13px;">緯度:</td>
    <td><input type="number" name="LATITUDE" id="LATITUDE" value="${pd.LATITUDE }" maxlength="200" placeholder="這裏輸入緯度" title="緯度" style="width:98%;"/></td>
</tr>

<script type="text/javascript">
    $(top.hangge());
    function openMap(){
        top.jzts();
    	var diag = new top.Dialog();
        diag.Drag=true;
        diag.Title ="地圖";
        diag.URL ="<%=basePath%>cmpbase/mapXY.do";
        diag.Width = 700;
        diag.Height = 500;
        diag.CancelEvent = function(){ //關閉事件
            var LATITUDE  = diag.innerFrame.contentWindow.document.getElementById('ZUOBIAO_X').value;
            var LONGITUDE  = diag.innerFrame.contentWindow.document.getElementById('ZUOBIAO_Y').value;
            if(LATITUDE !='' && LONGITUDE != ''){
                document.getElementById("LATITUDE").value = LATITUDE;
                document.getElementById("LONGITUDE").value = LONGITUDE;
            }
            diag.close();
        };
        diag.show();
    }
</script>

後臺：

/**獲取地圖座標頁面
 * @return
 * @throws Exception
 */
@RequestMapping(value="/mapXY")
public ModelAndView mapXY() throws Exception{
	ModelAndView mv = this.getModelAndView();
	PageData pd = new PageData();
	pd = this.getPageData();
	mv.setViewName("web/company/mapXY");
	mv.addObject("pd", pd);
	return mv;
}

跳轉MapXY.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>選點獲取經緯度</title>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=40GWXiduhOft266lK4N1dopL"></script>

    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #l-map {
            height: 100%;
            width: 78%;
            float: left;
            border-right: 2px solid #bcbcbc;
        }

        #r-result {
            height: 100%;
            width: 20%;
            float: left;
        }
    </style>

    <script type="text/javascript">
        $(top.hangge());
        var dg;
        $(document).ready(function () {
            dg = frameElement.lhgDG;
        });

        function success() {
            if (dg.curWin.document.forms[0]) {
                dg.curWin.document.forms[0].action = dg.curWin.location + "";
                dg.curWin.document.forms[0].submit();
            } else {
                dg.curWin.location.reload();
            }
            dg.cancel();
        }

        function choose() {
            var ZUOBIAO_X = document.getElementById("ZUOBIAO_X").value;
            var ZUOBIAO_Y = document.getElementById("ZUOBIAO_Y").value;
            if (ZUOBIAO_X == "" || ZUOBIAO_Y == "") {
                alert("請先輸入經緯度");
            } else {
                top.Dialog.close();
            }
        }
    </script>
</head>
<body>
<div>
    <table bgcolor="#E3E4D8" width="100%">
        <tr>
            <td>緯度：</td>
            <td><input id="ZUOBIAO_X" value="" type="text"/></td>
            <td>經度：</td>
            <td><input id="ZUOBIAO_Y" value="" type="text"/></td>
            <td><input type="button" value="確定" οnclick="choose();"/></td>
            <td width="100">
                <input type="text" id="suggestId" size="20" value="這裏輸入搜索地址" style="width:150px;"/>
            </td>
        </tr>
    </table>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;">
    </td>
    </tr>
    </table>
</div>
<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">
// 百度地圖API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("allmap");
    map.centerAndZoom("北京", 12);                  	 	// 初始化地圖,設置城市和地圖級別。

    var ac = new BMap.Autocomplete(    					//建立一個自動完成的對象
        {
            "input": "suggestId"
            , "location": map
        });

    ac.addEventListener("onhighlight", function (e) {  	//鼠標放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        //G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠標點擊下拉列表後的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        //G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地圖上所有覆蓋物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //獲取第一個智能搜索的結果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    		//添加標註
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }


    map.addControl(new BMap.ScaleControl());                    // 添加默認比例尺控件
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));                    // 左上
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));                    // 右上
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));                    // 左下
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));                    // 右下

    map.addControl(new BMap.NavigationControl());  //添加默認縮放平移控件
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，僅包含平移和縮放按鈕
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，僅包含平移按鈕
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，僅包含縮放按鈕

    map.enableScrollWheelZoom();    //啓用滾輪放大縮小，默認禁用
    map.enableContinuousZoom();    	//啓用地圖慣性拖拽，默認禁用


    function showInfo(e) {

        document.getElementById("ZUOBIAO_X").value = e.point.lat;
        document.getElementById("ZUOBIAO_Y").value = e.point.lng;

    }

    map.addEventListener("click", showInfo);
</script>

結合網上資料：

使用過程中需要一些標註的描述 ，點擊這裏查看原文：

1.實現功能：通過給定的座標點，往地圖中添加標註點，點擊標註點，顯示改點的詳細信息。
2.效果圖：
演示鏈接：http://www.ltbetter.com:8080/BMap/MapTest1.html

這裏寫圖片描述
3.核心方法：

  • 手動創建數據，實際項目則是接受GPS信息
//建立座標點：
// lng：經度 lat：緯度
var points = [  
{"lng":112.58,"lat":26.89,"url":"http://www.baidu.com","id":1,"name":"p1"},  
{"lng":112.59,"lat":26.90,"url":"http://www.mi.com","id":2,"name":"p2"},  
{"lng":112.57,"lat":26.88,"url":"http://www.csdn.com","id":3,"name":"p3"}  
];
  • 創建添加標註點到地圖，併爲標註點添加點擊事件
//創建標註點並添加到地圖中
function addMarker(points) {
    //循環建立標註點
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //將標註點轉化成地圖上的點
        var marker = new BMap.Marker(point); //將點轉化成標註點
        map.addOverlay(marker);  //將標註點添加到地圖上
        //添加監聽事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
            //顯示信息的方法
                function() {
                showInfo(this,thePoint);
            });
         })();  
    }
}
  • 編寫信息顯示方法
function showInfo(thisMarker,point) {
    //獲取點的信息
    var sContent = 
    '<ul style="margin:0 0 5px 0;padding:0.2em 0">'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">名稱：</span>' + point.name + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">詳情</a></li>'  
    +'</ul>';
    var infoWindow = new BMap.InfoWindow(sContent); //創建信息窗口對象
    thisMarker.openInfoWindow(infoWindow); //圖片加載完後重繪infoWindow
}
  • 創建地圖
//創建地圖
var map = new BMap.Map("allmap");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 設置中心點
map.centerAndZoom( "衡陽");       //指定中心城市
map.setCurrentCity("衡陽");          
map.addControl(new BMap.MapTypeControl());  //設置可拖拽 
map.enableScrollWheelZoom(true);  //添加滾輪縮放   
addMarker(points); //添加標註
</script>
  • Tip: 想使用百度地圖api需要申請一個ak，申請方法就不介紹了，百度一大堆.

完整代碼(不包括api的ak 需要自己申請)：

<!DOCTYPE html>
<html>
<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: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" 
//ak填自己申請的ak
src="http://api.map.baidu.com/api?v=2.0& ak=你申請的AK">
</script>
<title>百度地圖api展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//新建三個地圖上點
var points = [  
{"lng":112.58,"lat":26.89,"url":"http://www.baidu.com","id":1,"name":"p1"},  
{"lng":112.59,"lat":26.90,"url":"http://www.mi.com","id":2,"name":"p2"},  
{"lng":112.57,"lat":26.88,"url":"http://www.csdn.com","id":3,"name":"p3"}  
]; 
//創建標註點並添加到地圖中
function addMarker(points) {
    //循環建立標註點
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //將標註點轉化成地圖上的點
        var marker = new BMap.Marker(point); //將點轉化成標註點
        map.addOverlay(marker);  //將標註點添加到地圖上
        //添加監聽事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
                function() {
                showInfo(this,thePoint);
            });
         })();  
    }
}
function showInfo(thisMarker,point) {
    //獲取點的信息
    var sContent = 
    '<ul style="margin:0 0 5px 0;padding:0.2em 0">'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">名稱：</span>' + point.name + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">詳情</a></li>'  
    +'</ul>';
    var infoWindow = new BMap.InfoWindow(sContent); //創建信息窗口對象
    thisMarker.openInfoWindow(infoWindow); //圖片加載完後重繪infoWindow
}
//創建地圖
var map = new BMap.Map("allmap");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 設置中心點
map.centerAndZoom( "衡陽");
map.setCurrentCity("衡陽");          //設置爲衡陽
map.addControl(new BMap.MapTypeControl());   
map.enableScrollWheelZoom(true);     
addMarker(points);
</script>

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

你在濫用Python嗎？初學者常會遇到的5個情景

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ Python擁有衆多學習者，可謂是如今許多編程初學者的首選語言。易學的語法、豐富的庫和大量的社區都是Python飛速發展的主要原因。 6

雲棲號資訊小編 2020-07-28 12:40:54

如何在 Deno 應用程序中調用 Rust 函數？

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ 要點： Deno 和 Node.js 都在基於 C/C ++ 的運行時上執行 JavaScript 以實現高性能。Deno 是單個二進制應

雲棲號資訊小哥 2020-07-22 15:37:50

巴克萊銀行用網頁時光機當作某些 JS 代碼的“CDN”

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ 巴克萊銀行似乎一直在使用互聯網檔案館的網頁時光機（Wayback Machine）作爲一個“內容分發網絡”來獲取一個 Javascript

雲棲號資訊小哥 2020-07-10 14:34:46

spa頁面，不同組件按需引入js，aliplayer

(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur

HainesFreeman 2020-07-08 12:39:19

js 函數重載

概念：允許某個函數有各種不同輸入，根據不同的輸入，調用不同的函數，然後返回不同的結果。 簡單定義：根據不同參數長度來實現讓同一個函數，進行不同處理 function addMethod (obj, name, fun) { le

HainesFreeman 2020-07-08 12:39:19

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

函數的內部屬性————Arguments對象

一、基本點 arguments是一個類數組對象，包含着傳入函數中的所有參數。主要用途是保存函數參數，但這個對象還有一個名叫callee的屬性 arguments的 callee屬性是一個指針，指向擁有這個arguments對象的

ddx2019 2020-07-08 11:55:42

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

知道這 20 個正則表達式，能讓你少寫 1,000 行代碼

http://www.runoob.com/regexp/regexp-syntax.html 正則表達式，一個十分古老而又強大的文本處理工具，僅僅用一段非常簡短的表達式語句，便能夠快速實現一個非常複雜的業務邏輯。熟練地掌握正則表

哈哈金馆长 2020-07-08 11:36:23

a標籤中使用onclick提示function未定義

<a href="javascript:;" onclick="text()">leave a message</a> 今天做東西的時候，發現在a標籤中使用onclick觸發函數，一直報錯，顯示function未定義，開始還以爲

Ro0k1e 2020-07-08 11:27:27

Promise基本使用（慕課Promise教程筆記）

很久沒寫博客了......看了很多關於Promise的文章，但是感覺也不是很理解，沒辦法去就看視頻了。偶然發現慕課裏有個關於Promise的視頻，然後今天看了前兩章，順便整理了下筆記，記錄下吧~ Promise 是什麼？ 用於異步計算。

冰派甜心 2020-07-08 11:05:39

toString()、String(obj)和valueOf()

toString() 每個字符串都有一個toString()方法，該方法返回字符串的一個副本（當前函數源代碼的字符串），但是null和undefined值沒有這個方法。 toString()一般不用傳參，也可以傳入基數(進制數)爲參，默

冰派甜心 2020-07-08 11:05:38

和 待補充

http://www.shsay.com   http://blog.csdn.net/ladofwind/article/details/7535387

叼子 2020-07-08 11:48:52

angular與jsp對比

Q: angular + springmvc前後端分離 vs springmvc(jsp)區別A: 一、前後端整體結構（1）在寫springmvc(jsp)項目時，必須在controller層考慮要返回哪個頁面，頁面上塞什麼參數。（2）a

weixin_41810396 2020-07-08 11:03:21