2. 程式人生 > >百度地圖API JS呼叫例項

百度地圖API JS呼叫例項

阿新 • • 發佈：2019-01-05
function AddMap(){ //設定地圖容器高度 var screenH=window.innerHeight; var headerH=this.elById("icon_header").offsetHeight; this.elById("map_show").style.height=screenH-headerH+"px"; } /** * @param el 地圖初始化容器 * @param p 初始化座標點 */ AddMap.prototype.init=function
(el,p){ var point={ lng:116.404113, lat:39.914965 }; if(p && p.lng && p.lat){ point.lng=p.lng; point.lat=p.lat; } this.m = new BMap.Map(el); //例項化地圖 this.p = new BMap.Point(point.lng,point.lat); this
.m.enableContinuousZoom(); //啟用地圖慣性拖拽 this.m.enableScrollWheelZoom(); //啟用滾輪放大縮小 this.m.centerAndZoom(this.p, 12); //設定地圖顯示中間點、地圖顯示級別 this.addMaker(this.p); this.search(); //搜尋 this.getLocation(); }; //獲取座標點位置 AddMap.prototype.getLocation=function
(){ var _this=this; var confirm=this.elById("confirm_location"); confirm.addEventListener("click",function(){ var makerPoint=_this.makerPoint(); console.log(makerPoint) }); }; AddMap.prototype.elById=function(id) { return document.getElementById(id); }; //新增座標顯示 AddMap.prototype.addMaker=function(location){ var mk = new BMap.Marker(location); mk.enableDragging(); //marker可拖拽 mk.enableMassClear(); this.m.addOverlay(mk); //在地圖中新增marker this.makerPoint=function(){ return mk.getPosition(); //返回當前座標 }; }; //搜尋 AddMap.prototype.search=function(){ var _this=this; var ac = new BMap.Autocomplete( //建立一個自動完成的物件 { "input" : "suggestId", "location" : _this.m } ); ac.addEventListener("onconfirm", function(e) { //滑鼠點選下拉列表後的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; _this.elById("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; _this.setPlace(_this.m); }); }; //定位到具體位置 AddMap.prototype.setPlace=function(m){ var _this=this; m.clearOverlays(); //清除地圖上所有覆蓋物 function myFun(){ var pp = local.getResults().getPoi(0).point; //獲取第一個智慧搜尋的結果 m.centerAndZoom(pp, 15); //設定地圖顯示中間點、地圖顯示級別 _this.addMaker(pp); } var local = new BMap.LocalSearch(m, { //智慧搜尋 onSearchComplete: myFun }); local.search(myValue); }; var mapInclude=new AddMap(); //初始化地圖 //需傳入容器DOM（id），可傳座標點定位 mapInclude.init("map_show",{lng:104.072247,lat:30.663436});

相關推薦

百度地圖API JS呼叫例項

function AddMap(){ //設定地圖容器高度 var screenH=window.innerHeight; var headerH=this.elById("icon_header").offsetHeight; thi

百度地圖API JS 2.0

1.初始化地圖，並設定地圖中心點 var map = new BMap.Map("allmap"); // 建立Map例項 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點座

百度地圖api 非同步呼叫

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>非同步載入</title> <script type="text/java

百度地圖API js離線開發

首先貼出前輩的經驗：在此基礎上，需要獲取百度地圖的瓦片，目前能免費獲取瓦片的軟體，我已經存到雲盤中，但精度最大隻能到15級。連結: https://pan.baidu.com/s/1HQ5A--YZtNVhXStaUAk9UQ 密碼: zvz4操作方法就是選擇區域並雙擊下載，

js呼叫百度地圖api實現定位

<?php /** * Created by PhpStorm. * User: onlythen * Date: 5/26/15 * Time: 3:23 PM */ session_start(); require_once("config.php"); $link_id=mys

百度地圖API呼叫簡單入門例項

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv

百度地圖api入門介紹（js篇）

顯示 .com cnblogs androi web 入門介紹 步驟 api 地圖api 最近因為用到了百度地圖的api,感覺還有點用記錄一下，一方面充實一下自己，第二也希望有用到的同學可以參考一下；因為之前用過android baidu api 所以再用web

java呼叫百度地圖API開發，百度線上地圖開發——未完待續

這裡是目錄 一、引入百度地圖API 二、百度地圖開發 1、定義一個div來存放地圖 2、生成地圖 3、新增一個跳躍的點 4、新增控制元件 5、有其他需要的請留言 一、引入百度地圖API   百度地圖官方示例：http://lbsyun.b

呼叫百度地圖API的小demo

update <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam

呼叫百度地圖API定位位置

以下程式碼是百度開發示例程式碼： <html> <head>     <meta http-equiv="Content-Type" content="text/html; charse

呼叫百度地圖API

<html> <div id="allmap"></div> </html> // ak為你註冊的金鑰 <script type="text/javascript" src="http://api.map.baidu.com/api

html呼叫百度地圖api

具體程式碼 <!DOCTYPE html> <head> <meta  charset="utf-8" /> <title>百度地圖API</title> <script type="text/javascr

Android百度地圖api呼叫

1.首先，準備工作。前往百度地圖開放平臺 註冊百度開發者賬號，建立應用，獲取API key 地址：http://lbsyun.baidu.com/apiconsole/key 建立應用需要應用的數字簽名SHA1和包名 SHA1可以通過雙擊gradle裡面的signingRe

呼叫百度地圖API介面製作熱力圖

呼叫百度地圖API介面製作熱力圖 Python學了很久，也做了一些機器學習的demo，利用matolotlib庫做過一些視覺化。今天呢想嘗試做一下熱力圖。先PO一張我最終效果圖。 因為資料原因，效果一般，但我們的目的還是達到了。下面就講一下大致流程。 1、資料準備 我沒有上千個

呼叫百度地圖api，通過ip獲取當前城市以及經緯度

一、申請Ak值 登入百度地圖開放平臺： 建立應用： 建立成功後ip值就有了： 二、程式碼實現 <?php $ip="xxxxxxx"; $content=file_get_contents("http://api.map.baidu.com/location/ip?

C#呼叫百度地圖API經驗分享（三）

    這一篇我將跟大家分享一下我自己在開發過程中總結出的一些操作地圖的方法，屬性，及思路，希望可以讓大家少走彎路。 1.定位 一般百度的示例DEMO裡開始初始化地圖時用的都是map.centerAn

百度地圖 API 呼叫 例子

http://developer.baidu.com/map/jsdemo.htm#i7_1 地址是呼叫方法的例子. unit Unit1; interface uses   System.SysUtils, System.Types, System.UITypes,

百度地圖高階例項1-如何利用【百度地圖API】，製作房產酒店地圖？（中）

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>酷訊酒店地圖</title>

JS百度地圖api使用方法

首先，引入百度地圖的指令碼：[javascript] view plain copy<script src="http://api.map.baidu.com/api?v=2.0&ak=A

C#呼叫百度地圖API經驗分享

一、引言 找了個示例專案，運行了下，然後對照著百度的官方示例（百度地圖開放平臺-首頁連結）自己增加了點內容。 需要技能為C#，JavaScript，HTML。不會後兩個，複製貼上官方demo也能對付著用。 先開個坑，有空更新完整版。 二、基礎技能 開發中可能涉