2. 程式人生 > >百度地圖AIP（2）：地圖根據標註點位置自適應調整縮放等級

百度地圖AIP（2）：地圖根據標註點位置自適應調整縮放等級

阿新 • • 發佈：2019-02-16

效果

自動設定縮放級別

原始碼

核心方法

// 根據點的陣列自動調整縮放級別
function setZoom (bPoints) {
     var view = map.getViewport(eval(bPoints));  
        var mapZoom = view.zoom;   
        var centerPoint = view.center;   
        map.centerAndZoom(centerPoint,mapZoom);  
}

完整程式碼

<!-- 
    liaotuo 
    2016.09.11 
    自動調整縮放等級 例項
-->
 

<!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="http://api.map.baidu.com/api?v=2.0& ak=你自己申請的ak"></script>
<title>地圖根據標註點自適應大小</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 原始gps座標
 

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.taobao.com","id":2,"name":"p2"},  
{"lng":112.57,"lat":26.88,"url":"http://www.google.com","id":3,"name":"p3"}  
]; 
// 百度座標系座標(地圖中需要使用這個)
var bPoints = new Array();
//建立標註點並新增到地圖中
function addMarker(points) {
    //迴圈建立標註點
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //將標註點轉化成地圖上的點
        bPoints.push(point); // 新增到百度座標陣列 用於自動調整縮放級別
        var marker = new BMap.Marker(point); //將點轉化成標註點
        map.addOverlay(marker);  //將標註點新增到地圖上
    }
}

// 根據點的陣列自動調整縮放級別
function setZoom (bPoints) {
     var view = map.getViewport(eval(bPoints));  
        var mapZoom = view.zoom;   
        var centerPoint = view.center;   
        map.centerAndZoom(centerPoint,mapZoom);  
}

//建立地圖
var map = new BMap.Map("allmap");    
map.centerAndZoom(new BMap.Point(112.591886,26.905407), 14); // 設定中心點
addMarker(points);
map.addControl(new BMap.MapTypeControl());   
map.enableScrollWheelZoom(true);     

setTimeout(function(){
    setZoom(bPoints);
}, 3000)

</script>

相關推薦

百度地圖AIP（2）：地圖根據標註點位置自適應調整縮放等級

效果 原始碼 核心方法 // 根據點的陣列自動調整縮放級別 function setZoom (bPoints) { var view = map.getViewport(e

Unity3D開發（一）：NGUI之UIRoot螢幕解析度自適應

NGUI在Unity3D遊戲開發中非常常用，而NGUI對於每一個UI場景，都是以一個UIRoot為UI遊戲物件樹的根的，那麼這個UIRoot是起什麼作用的呢？ 先簡單看一下UIRoot中的基本屬性 UIRoot遊戲物件的屬性只有4個，分別是縮放規則，手動高度，最小高度和最

Android studio 百度地圖開發（2）地圖定位

gcj02 settings tick all adding ext tope wid erro Android studio 百度地圖開發（2）地圖定位 email:[email protected]/* */ 開發環境：win7 64位

百度地圖API繪製計程車流向地圖（一）：將起始GPS點對映到地圖上

打算在年前實現用百度地圖API繪製NYC計程車流向地圖。目前實現了將出租車的起始點的GPS點對映到地圖上，繪製了GPS點的熱力圖。記錄在此。 所用資料：NYC綠色計程車資料 時間：2016.01.01 0:00-24:00 共24小時 GPS點個數：64398 繪圖方式：熱力圖 百度地圖

百度地圖API（3）：判斷地圖上的點是否在 圓形 多邊形 區域內

GeoUtils.js 效果圖 原始碼 Tips 要注意Point和Circle 都必須是:BMap.Point和BMap.Bounds物件 此案例只展示了多邊形和

3D點雲地圖地面去除（2）：Progressive Morphological Filter

Progressive Morphological Filter論文：http://users.cis.fiu.edu/~chens/PDF/TGRS.pdf 本演算法本身用於處理高空獲取的鐳射雷達資料，把地面與非地面的物體分割，來獲取地貌3d地圖的，目前已經整合在PCL中。 具體的演算

百度地圖開發（三）之地圖控制 + 定位

    接下來，這篇blog主要說一些關於地圖控制方面的內容和定位功能。     百度地圖提供的關於地圖的操作主要有：單擊、雙擊、長按、縮放、旋轉、俯視等。 地圖控制     我們現在已經知道，想要顯示一個地圖，只需要在xml檔案中新增一個MapView控制元件即可，但

遺傳演算法（2）：對適應度函式的改進

-----------------------------關於適應度的問題1. 有的時候，目標函式可能不一定可以直接作為適應度函式。2. f(x1), f(x2), ... f(xN)之間的差別可能不是

演算法與資料結構（2）：時間複雜度——以歸併排序為例

這一篇文章我們首先會介紹一下歸併排序，並以歸併排序和我們上一章所說的插入排序為例，介紹時間複雜度。此係列的所有程式碼均可在我的 [github](https://github.com/AlbertShenC/Algorithm) 上找到。 [點此](https://github.com/AlbertShen

Windows Phone開發（2）：豎立自信，初試鋒茫

一鍵 優秀 保持 知識 sdn ant emulator 一個 動畫 上一篇文章中，我們聊了一些“大炮”話題，從這篇文章開始，我們一起來學習WP開發吧。 一、我們有哪些裝備。 安裝完VS 學習版 for WP後，也連同SDK一並安裝了，不必像安卓那樣，安裝JDK，下載

TCP/IP協議（2）：網絡設備

數據包 服務器 網絡設備 風暴 二層交換機 不同的 中繼器 tcp/ip 解決 1、中繼器（Repeater） 中繼器工作在OSI的一層，我們知道，超5類線的傳輸距離最大為100米，超過這個距離信號就會衰減，中繼器就是為了防止信號變差，將網絡信號進行再生和重定時。 2、

MongoDB（2）： 增刪改操作

db nosql mongo 增刪改 curd 附加命令：1、進入前端操作命令./mongo [ip:端口]說明：默認會自動選本地，端口270172、顯示所有的庫> show dbs; 或者 show databases;3、選擇庫> use 庫名;4、顯示庫所有的集合&g

數據清洗小記（2）：全角數字轉換半角數字

大局觀 山東 轉載 亞洲 pop rpm包 stats mod 法律 原創作品。出自 “深藍的blog” 博客，歡迎轉載，轉載時請務必註明出處，否則有權追究版權法律責任。深藍的blog：http://blog.csdn.net/huangyanlong/article/d

python每日一類（2）：platform

獲得 min def glob model implement 匯總 uname 信息 根據官方文檔的解釋（https://docs.python.org/3.5/library/platform.html#module-platform）： 學習其他人的代碼如下： #

springBoot（2）：Properties和YAML配置文件

springboot springboot的properties和yaml配置文件 一、配置文件的生效順序，會對值進行覆蓋1. @TestPropertySource 註解2. 命令行參數3. Java系統屬性（System.getProperties()）4. 操作系統環境變量5. 只有在rando

Java學習（2）：將鍵盤錄入的內容保存到指定文件中

stream exce 創建 txt 關閉 如果 下午 line 再次 要求：保存鍵盤錄入的內容，當鍵盤輸入end時，錄入結束。 1 /** 2 * 保存鍵盤輸入，並以end結束 3 * 4 * @author xcx 5 * @time 2017年6

初識vue 2.0（2）：路由與組件

組件化 script -128 watch css image 暫時 效果 默認 1，在上一篇的創建工程中，使用的的模版 webpack-simple 只是創建了一個簡單的demo，並沒有組件和路由功能，此次采用了webpack模版，自動生成組件和路由。^_^ 在模版初始

python函數（2）：函數進階

int splay 基本 源文件 tuple [0 執行 內容 理念 昨天說了函數的一些最基本的定義，今天我們繼續研究函數。今天主要研究的是函數的命名空間、作用域、函數名的本質、閉包等等 預習： 1、寫函數，用戶傳入修改的文件名，與要修改的內容，執行函數，完成整個文件

記Angular與Django REST框架的一次合作（2）：前端組件化——Angular

服務器 信息 outer demo cli 組成 控制 set 根據 註：這是這個系列的第二部分，主要集中在Angular的使用方面。之前使用過AngularJS（Angular 1.x），混在Django的模板中使用，這些頁面一般完全是結果展示頁。在有Django表單輸入

（轉）Unity3d使用心得（2）：Unity3d 動態下載動畫資源——AnimationClip 的使用 - 斯瑪特琦

通過 dsm color 解決 con content 資源 sse popu 引言： 在使用 Unity3d 開發微端、或者網頁遊戲的時候常常須要將資源打包成 AssetBundle ，然後通過 www 的方式動態的下載資源。今天要分享的是我再動態下