js呼叫百度地圖及呼叫百度地圖的搜尋功能_javascript技巧
js呼叫百度地圖的方法
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 50%;
margin: 0px;
padding: 0px;
}
#container
{
width:600px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body onload="loand()">
<div id="container">
</div>
<input id="lng" type="hidden" runat="server" />
<input id="lat" type="hidden" runat="server" />
<input id="Button1" type="button" value="标记图标" runat="server" onclick="getbiaoji()" />
<script type="text/javascript">
function getbiaoji() {
var lng = document.getElementByIdx_x("lng").value;
var lat = document.getElementByIdx_x("lat").value;
var map = new BMap.Map("container");
var point = new BMap.Point(lng, lat);
var marker = new BMap.Marker(point);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "经销商地址" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址:" + lng + lat, opts); // 创建信息窗口对象
marker.enableDragging(); //启用拖拽
map.addControl(new BMap.NavigationControl()); //左上角控件
map.enableScrollWheelZoom(); //滚动放大
map.enableKeyboard(); //键盘放大
map.centerAndZoom(point, 13); //绘制地图
map.addOverlay(marker); //标记地图
map.openInfoWindow(infoWindow, map.getCenter());
}
function loand() {
var map = new BMap.Map("container");
var point = new BMap.Point(104.083, 30.686); //默认中心点
var marker = new BMap.Marker(point);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "经销商地址" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址", opts); // 创建信息窗口对象
marker.enableDragging(); //启用拖拽
marker.addEventListener("dragend", function (e) {
point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标（拖拽以后的坐标）
marker = new BMap.Marker(point);
document.getElementByIdx_x("lng").value = e.point.lng;
document.getElementByIdx_x("lat").value = e.point.lat;
infoWindow = new BMap.InfoWindow("当前位置<br />经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);
map.openInfoWindow(infoWindow, point);
})
map.addControl(new BMap.NavigationControl()); //左上角控件
map.enableScrollWheelZoom(); //滚动放大
map.enableKeyboard(); //键盘放大
map.centerAndZoom(point, 13); //绘制地图
map.addOverlay(marker); //标记地图
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
}
</script>
</body>
</html>js呼叫百度地圖搜尋
引用百度js Api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxx"></script>
建立位址解析器：
var localSearch = null;
//查询参数
var options = {
//智能搜索
onSearchComplete: function (results) {
//查询结果状态码
if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
var s = convertMapSearch(results); //对结果进行处理
model.locationAddress(s); //将结果数据赋予knockout对象数组（可用其他数组对象代替）
}
}
};
localSearch = new BMap.LocalSearch("城市", options);結合knockout的textInput綁定方法和物件的subscribe屬性，實現輸入框變更即時查詢功能。
//绑定
<input id="txtAddress" type="text" placeholder="请输入用餐地址" data-bind="textInput: addressInput" />
//subscribe属性 在输入变化的时候执行地址查询
sf.addressInput.subscribe(function (val) {
var addr = $.trim(val);
if (addr == "") {
return;
}
localSearch.search(addr);
});以上就是腳本之家的小編給大家分享的js調用百度地圖及調用百度地圖的搜尋功能，有關更多關於百度地圖相關內容，請持續關注本站，本站沒有都有新的內容更新。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
百度地圖搭計程車如何支付 搭計程車的付款步驟介紹
Mar 13, 2024 am 10:04 AM
百度地圖APP現在已經都成為了超多用戶們首選的出行導航的軟體，那麼這裡的一些功能全面，都能夠免費的讓大家進行選擇操作哦，解決自己日常出行方面會遇到的一些問題，完全都能夠查詢到自己的一些出行的路線，規劃自己的一些出行的方案，查詢完對應的這一些路線，都能根據自己的需求，選擇合適的一些出行方式，那麼你們不管是選擇一些公共交通，騎行，步行或是搭計程車等，都能滿足你們的，有著對應的一些導航路線，成功的帶領你們去往某地，那麼大家選擇打車的話，都能感到更加的方便，超多的一些司機們都是會在線上接單，搭計程車變得超級
《百度地圖》如何新增地點
Mar 20, 2024 pm 01:46 PM
想要在百度地圖上新增地點，可能你需要經過一些複雜的步驟。不過，別擔心，接下來我會為你詳細介紹如何在百度地圖上添加新的地點，從而讓你更輕鬆地分享你的位置資訊或幫助他人找到目的地。百度地圖如何新增地點1、先開啟百度地圖APP，進入到主頁;2、然後進入到下圖所示的主頁，點選右側的【上報】按鈕;3、接著跳到上報功能頁，選擇下方的【新增地點】服務;4、然後在新增地點專區，在【其他信息】邊框中輸入信息;5、最後輸入對應的信息，點擊最底部的【提交】即可完成。
《百度地圖》叫計程車怎麼付費
Mar 26, 2024 pm 09:20 PM
在日常出遊中，我們常常需要搭計程車出行，而現在百度地圖也提供了叫車服務，方便快速。但是，許多人還不知道如何在百度地圖打車後付款。下面，我們就來詳細介紹一下百度地圖叫車支付的方法。百度地圖搭計程車怎麼付費1、先打開百度地圖APP，進入到主頁;2、之後跳到下圖所示的頁面，點擊右側的【搭計程車】;3、然後進入下圖的叫車功能頁，選擇其中的【個人中心】;4、接著在個人中心頁面，找到【支付管理】;5、最後在支付管理功能頁，選擇要開通付費的方式點擊【去開通】即可。
百度地圖車道級導航覆蓋全國200城，提升駕駛體驗
Feb 03, 2024 pm 03:05 PM
百度地圖最近宣布，他們成功推出了真城市車道級導航系統，已經覆蓋全國超過200個城市。這一系統的推出，大大改善了駕駛者的導航體驗。百度地圖的車道級導航與以往僅提供放大圖的導航方式相比，提供了更沉浸、立體的介面。該系統透過精細地還原真實世界的道路細節，如紅綠燈、車道分割線和公車道等，使駕駛者能夠更清晰地了解當前道路的狀況。這種車道級導航不僅可以幫助駕駛者更準確地選擇車道，還能提供更全面的交通信息，使得駕駛過程更加安全和便捷。據了解，為了實現這一目標，百度地圖獨自開發了業界首個地圖生成大模型。
百度地圖3d實景地圖怎麼看
Feb 23, 2024 pm 12:52 PM
百度地圖是有一個3d實景地圖功能，那麼3d實景地圖怎麼看呢?用戶們需要在我的里，找到更多的選項，然後在裡面找到3d地圖，就能夠查看地圖了。這篇3d實景地圖查看方法介紹就能夠告訴大家具體該如何設置，以下就是詳細介紹，趕緊看看吧。百度地圖使用教程百度地圖3d實景地圖怎麼看答：在我的-更多-3d地圖具體方法：手機版：1、首先點擊右下的我的。 2、在裡面找到更多的功能。 3.在裡面點擊3d實景就能夠使用了。網頁版：1.首先要輸入https://map.baidu.com進入網頁版。 2、點選右下的檢視方法，
百度地圖怎麼看3d即時街景 查看3d即時街景的方法
Mar 28, 2024 pm 03:20 PM
百度地圖導航手機版免費下載是一款非常專業的手機地圖導航軟體，軟體內的導航功能非常強大，只要是你想去的都能找到最準確的出行方案，想去哪裡就去哪裡非常方便，同時還能使用其他的導航功能，各路明星的語音包免費下載使用，各種導航模式在線使用，為大家的出行安全保駕護航，還能掃碼乘車更加方便，人手必備的出行導航助手，不用擔心會迷路的，現在小編在線仔細一一為百度地圖夥伴們帶來查看3d實時街景的方法。 1、開啟百度地圖，在常用功能列點擊更多 2、然後搜尋找到3d實景 3、然後進入到3d觀看介面 4、如
百度地圖怎麼標記多個地點 標記多個地點方法
Mar 15, 2024 pm 04:28 PM
上面的功能非常的多，尤其是對於在地圖方面可以標記到多個地方的一些為止，我們在知道一些地方的時候，肯定是採用標點的一些功能，這樣就可以為你們帶來多種不同方面的一些功能，你們所標點都會產生距離的差異，也就是可以知道距離究竟有多遠，當然也會顯示出上面地點的的一些名稱和詳細的信息都可以，但是很多網友們可能對於上面的一些內容資訊都不是非常的清楚，所以為了能夠讓大家們更好的進行多方面的一些選擇，所以今日小編就來給你們帶來多種不同方面的一些選擇，所以有興趣想法的朋友們，你也有興趣的話，就來試試看。 標
如何使用JS和百度地圖實現地圖平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成
