如何快速實現(xiàn)REST API集成以優(yōu)化業(yè)務流程
然后是script調用百度地圖API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密鑰"></script>接下來是在body中創(chuàng)建一個div標簽用于顯示地圖
<div id="container"></div> 然后就是編寫JavaScript了，以下是地圖初始化的代碼
var map = new BMap.Map("container");
//創(chuàng)建地圖實例
var point = new BMap.Point(116.404, 39.915);
//創(chuàng)建點坐標
map.centerAndZoom(point, 15);
//初始化地圖，設置地圖中心點以及縮放等級
map.enableScrollWheelZoom(true);
//開啟鼠標滾輪縮放需要注意的是，百度地圖的坐標不是經(jīng)緯度坐標系，而是使用百度BD09坐標系，因此實際選點時需要對坐標進行轉換。此外，其他地圖軟件基本上也是用自己的一套坐標系統(tǒng)，因此都需要進行坐標轉換。
百度的坐標轉換文檔是真的簡陋，就給了三個例子，連說明都沒有。
我先給出百度文檔中的相關代碼，然后解釋一下代碼的意義。
translateCallback = function (data) {
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
bm.addOverlay(marker);
var label = new BMap.Label("轉換后的百度坐標（正確）",{offset:new BMap.Size(20,-10)});
marker.setLabel(label); //添加百度label
bm.setCenter(data.points[0]);
}
}
setTimeout(function() {
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);首先是translateCallback函數(shù)，這個函數(shù)是一個回調函數(shù)，用于執(zhí)行轉換后的操作。至于為什么這么寫，我對JavaScript不熟悉，只能按照百度的寫法來了。data是轉換后的Object，目前看到有兩個參數(shù)，一個是status，表示轉換狀態(tài)，一個是points，表示轉換后的點坐標。
然后是setTimeout函數(shù)，這是一個延時函數(shù)，不需要考慮太多，其中1000的單位是ms。我們來關注convertor.tanslate()方法，其中convertor是BMap命名空間下的Convertor類的對象，第一個參數(shù)pointArr顧名思義就是存儲坐標點的Object，或者理解為數(shù)組，最后一個參數(shù)translateCallback就是回調函數(shù)。中間的兩個參數(shù)沒有說明具體含義，我個人猜測是表示不同的坐標系轉換，將編號為1的坐標系轉換為編號為5的坐標系。
需要注意的點有兩個：
然后是向地圖添加標注的操作，標注是BMap下的Marker類，添加方法是addOverlay()。
var marker = new BMap.Marker(point);
// 創(chuàng)建標注
map.addOverlay(marker);
// 將標注添加到地圖中
map.removeOverlay(marker);
// 移除標注
map.clearOverlays();
// 清除所有標注我們常用的操作有，更改標注的偏移量、更換圖標、監(jiān)聽標注、拖拽標注等。以下是官方文檔的代碼。
function addMarker(point, index){ // 創(chuàng)建圖標對象
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {
// 指定定位位置。
// 當標注顯示在地圖上時，其所指向的地理位置距離圖標左上
// 角各偏移10像素和25像素。您可以看到在本例中該位置即是
// 圖標中央下端的尖角位置。
anchor: new BMap.Size(10, 25),
// 設置圖片偏移。
// 當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您
// 需要指定大圖的偏移位置，此做法與css sprites技術類似。
imageOffset: new BMap.Size(0, 0 - index * 25) // 設置圖片偏移
});
// 創(chuàng)建標注對象并添加到地圖
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
}此外，Marker也有setIcon()方法來設置標注圖標，但是官方文檔只說明了有這么個方法，并沒有給出說明。以下我自己摸索的寫法，不知道是否標準（這里代碼貼錯了，修改不了了）。不過需要注意的是，大部分瀏覽器會限制Javascript加載本地文件，因此需要搭建服務器后才能加載本地文件。
var myIcon = new BMap.Icon("bicycle.png", new BMap.Size(24, 24), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0)
});
var marker = new BMap.Marker(data.points[j], {icon: myIcon})
map.addOverlay(marker);marker.addEventListener("click", function(){
alert("您點擊了標注");
}); marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("當前位置：" + e.point.lng + ", " + e.point.lat);
}) 以上就是我到目前為止用到的百度地圖API的操作。
因為項目還沒完成，代碼還處于未完工狀態(tài)，暫時就不貼上來了。稍微展示一下目前實現(xiàn)的樣子。
文章轉自微信公眾號@某猿雜記
