【實(shí)例簡(jiǎn)介】使用百度地圖API1.1的離線地圖,在線時(shí)可下載瓦片到本地,離線時(shí),從本地獲取瓦片加載顯示;

【實(shí)例截圖】

【核心代碼】

///

/// C#調(diào)用JS方法

///

private object CsharpInvokeJs(string func, params object[] args)

{

try

{

HtmlDocument doc = webBrowser1.Document;

object ret = doc?.InvokeScript(func, args);

return ret;

}

catch (Exception ex)

{

Console.WriteLine(ex.ToString());

return null;

}

}

///

/// Js調(diào)用C#方法

///

///

///

public object JsInvokeCsharp(string method, params object[] param)

{

if (method == "GetTile")

{//互聯(lián)網(wǎng)的瓦片資源改為本地瓦片資源

int x = (int)param[0];

int y = (int)param[1];

int z = (int)param[2];

string url = (string)param[3];

string localtile = TrySaveTile(x,y,z,url);

return localtile;

}

return null;

}

Js獲取瓦片url后,調(diào)用C#方法替換在線url為本地瓦片的路徑,實(shí)現(xiàn)離線地圖;

見"api1.1.js"

if (this.mapType == BMAP_NORMAL_MAP) {

e = aT.tileUrls[Math.abs(a0 aV) % aT.tileUrls.length]

"?qt=tile"

"&x=" a0

"&y=" aV

"&z=" i

"&styles=pl&udt=20140928";

e = e.replace(/-(\d )/gi, "M$1")

//API原本的獲取在線瓦片url,嘗試替換為本地瓦片地址

try {

var url = GetTile(a0, aV, i, e);

if (url != null) {

//有本地的離線瓦片,使用本地離線瓦片

e = url;

}

}

catch(e){

//異常,比如沒有可調(diào)用的C#-GetTile方法

}

}

可根據(jù)APi的js代碼添加覆蓋物.

如Maker的創(chuàng)建,更新坐標(biāo),刪除如下:

var Markers = new Array();

//添加一個(gè)覆蓋物-標(biāo)記點(diǎn)

function AddMarker(id, lng, lat, iconurl) {

try {

var point = new BMap.Point(lng, lat);

var myIcon = new BMap.Icon(iconurl, new BMap.Size(48, 32));

var marker = new BMap.Marker(point, { icon: myIcon });

Markers[id] = marker;

var label = new BMap.Label(id, { "offset": new BMap.Size(15, 0) });

marker.setLabel(label);

map.addOverlay(marker);

label.setStyle({

borderColor: "#808080",

color: "#333",

cursor: "pointer"

});

}

catch (e) {

alert(e);

}

}

//刪除覆蓋物-標(biāo)記點(diǎn)

function deleteMarker(id) {

if (Markers[id] == null) {

//沒有這個(gè)點(diǎn)

}

else {

map.removeOverlay(Markers[id]);

Markers.remove(Markers[id]);

}

}

//更細(xì)覆蓋物-標(biāo)記點(diǎn)坐標(biāo)

function updateMarker(id, p0, p1) {

var point = new BMap.Point(p0, p1);

if (Markers[id] == null) {

//沒有這個(gè)點(diǎn)

}

else {

Markers[id].setPoint(point);

}

}

百度地圖API有更新的版本,改為離線版本的方法類似.但是新版本在webbroswer這個(gè)老一代的控件里顯示一些覆蓋物不正常,所以只做了1.1的.注意1.1和2.0,3.0的API中一些方法名稱不一樣;

總結(jié)

以上是生活随笔為你收集整理的html 调用离线地图,百度地图API1.1制作的离线地图控件(html+webbroswer)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。