欄目導航

新聞資訊

新聞資訊

作為地圖界的老大哥，百度地圖如今已經發展了12個年頭了。想當年，去到一個陌生地方得在電腦上提前找好路線，然后短信發到手機上。現在，不管想去哪，只要從兜里掏出手機，說一句“小度小度”就可以了。

7月25日，百度地圖品牌升級暨V10.0新版發布會在北京召開，百度地圖事業部總經理李東旻、百度地圖客戶端總經理肖慧等出席發布會并對百度品牌升級及新版本發布進行全方位解讀與展示。

10.0的百度地圖主要有以下幾個亮點。首先是高科技的AR功能，在一個陌生的地方步行找位置是一件很痛苦的事情，這次百度地圖用AR技術與真實場景結合，讓這個痛苦的過程變得簡單有趣了。

在步行導航中選擇AR實景導航，在導航機器人圖圖（編輯使用的是楊洋形象播報）的及時播報和清晰的路線指引下，就算是路癡也能順利地找到目的地。

其次，百度地圖與摩拜、ofo、小藍車三家主流共享單車合作，實現完整的共享單車閉環，讓用戶在一個軟件中就能完成找車和找路的出行需求。

再次，馬路上越來越多的電動車也吸引了百度地圖的注意。新版百度地圖在騎行導航中專門設立了電動車板塊，優化路線。

以后，更多的電動車駕駛員能使用到合理的路線導航，相信在一定程度上可以減少電動車的交通事故發生率。

最后，語音功能是這次發布會的重點。打開新版百度地圖，大家可以用小度小度這樣標準的喚醒詞把導航語音喚醒起來。

當你小度小度以后就可以跟地圖直接對話，前方堵不堵，有沒有更快的路線，都可以通過語音查詢到。

如今，不僅是車載導航，連手機導航也意識到司機在駕駛過程中語音指令的重要性。通過語音設置路線，查詢問題能最大程度地讓駕駛員集中在開車上，從而降低交通事故的發生，這就是科技的力量。

除了這些之外，百度地圖在整個界面設計上也是煥然一新。其界面風格不再是O2O時代用的重色彩，大紅的標題，而是用一種全新的VI設計，簡潔的科技范畫面，讓你很容易看到需要的信息。

編輯點評：更簡單的設置、更龐大的數據、更貼心的場景是此次百度地圖新版本的主要特點。但事實上，在導航方面，好多中國品牌的車載導航早已實現了語音交互，并且有更好的語音識別率和更廣泛的語音指令設定，如今百度地圖才實現語音交互不免有失高科技公司的風范。希望日后百度地圖能及時跟上大環境的腳步，給用戶帶來更前衛的產品。

相關內容回顧：讓你安心駕駛搜狗地圖智能副駕發布

言

PS：我所使用的的是百度地圖Javascript API 3.0
本文是對之前使用的延續，繼續對百度地圖API的一些使用去做歸納和總結，本次主要是對地圖上的覆蓋物這塊做介紹，如果有小伙伴沒有看過之前的百度地圖API基本使用（一），可以先去觀看一下，前期所需要的一些準備，以及一些基本的用法。

感興趣的小伙伴可以自行查看百度地圖官方提供的文檔
百度地圖開放平臺開發文檔中的JavaScript API

也可以通過下方示例中心更直觀地看到百度地圖API的一些使用，以及它的一些特性
百度地圖開放平臺-示例中心

不過要注意：實例中心使用的是BMapGL去創建容器的，最新版GL地圖命名空間為BMapGL, 可按住鼠標右鍵控制地圖旋轉、修改傾斜角度。

由于本次使用的是BMapGL所以在引入API的時候也不太一樣
引入方式如下：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>

好的，廢話不多說，開整

百度地圖API-覆蓋物

在講覆蓋物之前，先給大家講一下覆蓋物的添加和刪除的方法，這個是通用的，下面各種類型的覆蓋的添加和刪除的使用是一樣的。在我們獲取到容器之后，根據自己的需求創建好自己的覆蓋物對象之后，如果我們需要添加覆蓋物的話，就可以使用容器對象.addOverlay(覆蓋物對象); 如果我們需要清除覆蓋物的話，只需要使用 容器對象.clearOverlays(); 就可以清除所有，但是如果只是想清除某一個覆蓋物的話，我們需要使用 容器對象.removeOverlays(覆蓋物對象);

代碼示例如下:

//創建容器
var map=new BMapGL.Map('allmap');
var point=new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 創建點覆蓋物
var marker=new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
//添加覆蓋物
map.addOverlay(marker);
//刪除具體覆蓋物
map.removeOverlays(marker);
//刪除所有覆蓋物
map.clearOverlays();

1. 點覆蓋物

點覆蓋物主要使用的是Marker這個方法，例如： var marker1=new BMapGL.Marker(new BMapGL.Point(經度, 緯度)); 這樣就創建好了一個點覆蓋物對象，我們需要使用上面介紹的添加覆蓋物的方法，將覆蓋物添加到容器中，即容器對象.addOverlay(marker1)
這樣就實現了簡單的點覆蓋物，不過有的時候需要我們的覆蓋物能夠拖動，所以這個時候就要用到一個屬性 enableDragging，默認情況下是false,也就是說在上面的那些默認創建的方式這個屬性都是false,這是屬性字面意思也很好理解支持拖拽，所以如果有需要拖拽的需求，我們只需要將整個屬性設置為true。

代碼示例如下：

var map=new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
// 創建點標記
var marker1=new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
var marker2=new BMapGL.Marker(new BMapGL.Point(116.404, 39.915),{
    enableDragging: true
});
// 在地圖上添加點標記
map.addOverlay(marker1);
map.addOverlay(marker2);

上面實現了根據經緯度去定位點覆蓋物，以及通過enableDragging屬性設置為可拖拽。如果我們的需求是這個點覆蓋物不用它默認的紅色點，使用一個小車的圖片或者別的什么圖片，這個時候就需要我們去自定義這個點的圖片以及點覆蓋物初始化的時候使用我們引入的圖標，去做一下修改

代碼如下：

var map=new BMapGL.Map('container');
var point=new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 創建小車圖標
var myIcon=new BMapGL.Icon("/jsdemo/img/car.png", new BMap.Size(52, 26));
// 創建Marker標注，使用小車圖標
var pt=new BMapGL.Point(116.417, 39.909);
var marker=new BMapGL.Marker(pt, {
    icon: myIcon
});
// 將標注添加到地圖
map.addOverlay(marker);

后續可能還需要對點覆蓋物添加點擊事件，實現也比較簡單，直接上代碼：

var map=new BMapGL.Map('container');
var point=new BMapGL.Point(116.404, 39.925);
map.centerAndZoom(point, 15);
// 創建點標記
var marker=new BMapGL.Marker(point);
map.addOverlay(marker);
// 創建信息窗口
var opts={
    width: 200,
    height: 100,
    title: '故宮博物院'
};
var infoWindow=new BMapGL.InfoWindow('地址：北京市東城區王府井大街88號樂天銀泰百貨八層', opts);
// 點標記添加點擊事件
marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point); // 開啟信息窗口
});

實現效果如下圖所示：

如果想研究比較詳細的點覆蓋物的小伙伴可以自行查看研究
覆蓋物-點覆蓋物

2. 矢量圖形覆蓋物

var map=new BMapGL.Map('container');
var point=new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);

// 繪制面
var polygon=new BMapGL.Polygon([
    new BMapGL.Point(116.387112, 39.920977),
    new BMapGL.Point(116.385243, 39.913063),
    new BMapGL.Point(116.394226, 39.917988),
    new BMapGL.Point(116.401772, 39.921364),
    new BMapGL.Point(116.41248, 39.927893)
], {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
map.addOverlay(polygon);
// 繪制線
var polyline=new BMapGL.Polyline([
    new BMapGL.Point(116.399, 39.910),
    new BMapGL.Point(116.405, 39.920),
    new BMapGL.Point(116.423493, 39.907445)
], {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
map.addOverlay(polyline);
// 繪制圓
var circle=new BMapGL.Circle(new BMapGL.Point(116.404, 39.915), 500, {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
map.addOverlay(circle);

實現效果如下圖所示：

還有鏤空面繪制，貝塞爾曲線，以及3D棱柱的實現，感興趣的小伙伴可以自行查看研究
覆蓋物-矢量圖形覆蓋物

3. 疊加層

疊加層目前項目上沒有應用，所以這塊就不做過多闡述，感興趣的小伙伴可以自行查看研究
覆蓋物-疊加層

4. 信息窗口

InfoWindow：信息窗口。也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。
添加信息窗口
信息窗口是地圖上方浮動顯示的HTML內容，可直接在地圖上的任意位置打開，也可以在標注對象上打開（此時信息窗口的坐標與標注的坐標一致）。
注意：同一時刻地圖上只能有一個信息窗口處于打開狀態。

// 百度地圖API功能
	var map=new BMapGL.Map("allmap");
	var point=new BMapGL.Point(116.404, 39.925);
	map.centerAndZoom(point, 15);
	
	var marker=new BMapGL.Marker(point);  // 創建標注
	map.addOverlay(marker);              // 將標注添加到地圖中
	var opts={
	    width : 200,     // 信息窗口寬度
	    height: 100,     // 信息窗口高度
	    title : "故宮博物院" , // 信息窗口標題
	    message:"這里是故宮"
	}
	var infoWindow=new BMapGL.InfoWindow("地址：北京市東城區王府井大街88號樂天銀泰百貨八層", opts);  // 創建信息窗口對象 
	marker.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow, point); //開啟信息窗口
	});

還有圖文組合類型，帶檢索功能的信息窗口，感興趣的小伙伴可以自行查看研究
覆蓋物-信息窗口

5. 右鍵菜單

var map=new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.403694, 39.927552), 12);
map.enableScrollWheelZoom(true);
var menu=new BMapGL.ContextMenu();
var txtMenuItem=[
    {
        text: '放大一級',
        callback: function () {
            map.zoomIn();
        }
    }, {
        text: '縮小一級',
        callback: function () {
            map.zoomOut();
        }
    }
];
for (var i=0; i < txtMenuItem.length; i++) {
    menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
}
map.addContextMenu(menu);

6. 軌跡運動

代碼如下：

<!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" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
	<title>大地線路書</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地圖API功能
	var map=new BMapGL.Map("allmap");
	var point=new BMapGL.Point(116.404, 39.925);
	map.centerAndZoom(point, 4);
	map.enableScrollWheelZoom();
    function startLushu() {
        var fly='data:image/png;base64,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';
        lushu=new BMapGLLib.LuShu(map, polyline.getPath(), {
            geodesic: true,
            autoCenter: true,
            icon: new BMapGL.Icon(fly, new BMapGL.Size(48, 48), { anchor: new BMapGL.Size(24, 24) }),
            speed: 1000000,
            enableRotation: true
        });
        setTimeout('lushu.start()', 4000);
    }
    var path=[
        new BMapGL.Point(116.617562,40.0823),
        new BMapGL.Point(37.700058,55.850864)
    ];
    var polyline=new BMapGL.Polyline(path, {
        clip: false,
        geodesic: true,
        strokeWeight: 3
    });
    map.addOverlay(polyline);
    startLushu();
</script>

軌跡運動還有3D以及視覺動畫，如果感興趣的小伙伴可以自行查看研究
覆蓋物-軌跡運動

感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊和關注。

個問題比較常見，很多店鋪老板可能根本沒意識到，今天為大家解答下：

1、百度地圖上搜不到店鋪是什么原因

這是因為每個區域店鋪或商家特別多，尤其是大的商城，生活服務廣場，店家密集，百度地圖會顯示比較重要的品牌店鋪，如麥當勞、肯德基、全家、正大雞排等。有些個體戶商店由于品牌不知名等原因，在該區域打開地圖就無法找到店鋪位置。

2、如何才能找到朋友的店鋪呢？

說起來其實比較簡單，在百度地圖上標注下就可以了，標注步驟參考：

（1）電腦打開百度地圖，網址https://map.baidu.com/，底部找到“新增地點”；

百度地圖底部 “新增地點” 按鈕

（2）點擊“新增地點”填入商家店鋪信息，提交即可；

根據提示，輸入詳細信息

3、為什么要進行地圖標注呢？對店鋪有什么好處？

（1）免費推廣店鋪，現在人們出行、旅游基本都離不開地圖、導航，到一個新地方之前，肯定要用地圖搜索周邊吃喝玩樂都有哪些商家，截止2018年，手機地圖用戶規模突破7億，其中月活高德地圖3.7億、百度地圖3.2億、騰訊地圖2063萬，如此龐大的用戶量，如果店鋪沒有標注，其實是很大的損失，標注成功就會獲取免費展示的機會；

2018年中國主要手機地圖APP在手機網民中滲透率統計情況

數據來源：前瞻產業研究院整理

（2）有助于客戶提前了解商家信息，電話預約取號

現在人們去一家餐廳或者電影院，第一件事要看下位置在哪里，地圖標注后，很容易看到店鋪環境、聯系方式，營業時間。如果周末去餐廳，人非常多，可以提前給餐廳打電話，了解排隊情況，提前預約取號，對商家和用戶都會非常方便；

標注完成圖

以上是百度地圖標注的問題解答，除百度地圖外，高德地圖、騰訊地圖、搜狗地圖使用也比較廣泛，標注方法也很簡單，感興趣的朋友可以研究下，一般地圖標注都是免費的。

本篇內容有幫助到您，動動小手點贊支持哦！關注我，鎖定更多營銷推廣知識分享。有疑問，可以評論留言或私信我，會盡力為你解答！

操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综