需要用到的工具:
1位置展示組件 http://lbs.qq.com/tool/component-marker.html
2座標拾取器 http://lbs.qq.com/tool/getpoint/index.html
步驟:
第一步:在座標拾取器裏面輸入你的當前位置
比如北京市海淀區復興路32號院,找到該位置對應的coord座標,也就是經緯度
截圖下來然後記錄座標
coord:39.96554,116.26719
第二步:調用參數(以下信息拷貝至騰訊地圖位置展示組件)
1使用URL傳遞數據
1.1調用地址
http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀區復興路32號院|coord:39.87803,116.19025;title:成都園;addr:北京市豐臺區射擊場路15號北京園博園|coord:39.88129,116.27062;title:老成都;addr:北京市豐臺區嶽各莊梅市口路西府景園六號樓底商|coord:39.9982,116.19015;title:北京園博園成都園;addr:北京市豐臺區園博園內&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
1.2調用參數
參數名 | 必填 | 參數說明 | 示例 | |
---|---|---|---|---|
type | 是 | 0:使用URL傳遞的數據 1:使用地圖檢索數據,支持region和nearby檢索。參考 WebService API - 地點搜索 2:使用自有定製數據[暫未開放,後續會陸續支持] | type=0 | |
marker | 是 | marker參數的格式:marker=markerAttributes|markerAttributes,每個markerAttributes定義了一個標註的全部屬性,markerAttributes之間以"|"分隔。markerAttributes格式:coord:lat,lng;title:標註點名稱;addr:標註點地址。不同屬性之間用英文分號隔開,屬性名稱和屬性值之間用英文冒號隔開。特別提醒,URL中最多傳遞4個marker信息,且每個marker中title和addr的長度不能超過10個漢字。 | 單點標註: marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口橋北鐵路道口 多點標註: marker=coord:39.96554,116.26719;title:成都;addr:復興路32號院|coord:39.87803,116.19025;title:成都園;addr:北京園博園 | |
marker屬性集 | ||||
coord | 是 | 位置點的座標:lat,lng(英文逗號隔開) 這裏的座標是火星座標,可用座標拾取器獲取 | coord:39.892326,116.342763 | |
coordtype | 否 | 輸入的coord座標類型 可選值爲[1,6]之間的整數,每個數字代表的類型說明: 1. GPS座標 2. sogou經緯度 3. baidu經緯度 4. mapbar經緯度 5. [默認]騰訊、google、高德座標 6. sogou墨卡託 | coordtype:5 | |
title | 是 | 位置點名稱 | title:超好吃冰激凌 | |
addr | 是 | 位置點地址 | addr:北京市手帕口橋北鐵路道口 | |
init_view | 否 | 初始化顯示視圖,默認:顯示地圖 2:顯示列表,此參數只在多點標註下生效 | init_view=2 | |
key | 是 | 開發密鑰(key) | key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 | |
referer | 是 | 調用來源,一般爲您的應用名稱,爲了保障對您的服務,請務必填寫! | referer=myapp |
解釋如下:
調用地址(使用最長的那個url,因爲你參數傳遞的越多,定位越精確,而缺少某個參數,調用url時會報錯):http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.9982,116.19015;title:北京園博園成都園;addr:北京市豐臺區園博園內&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
固定寫法:http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:**;title:**;addr:**&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
其中的**爲自定義字段
上面說的coord是在座標拾取器裏面獲取座標,對應替代上面的第一個**
title就是你給你取的位置設置一個名字,對應替代上面的第二個**
addr就是你給你取的位置設置一個地址,對應替代上面的第三個**
注:一般而言,後面的key和referer字段我們都可以設置爲默認,如有特殊需求請自行更改
第三步:實戰
jsp頁面:
<div class="col col23 no_margin_right"><div class="map_border">
<iframe width="430" height="340" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:30.436367,114.263488;title:南三舍;addr:武漢市洪山區青菱街黃家湖西路武漢科技大學&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></iframe></div>
</div>
效果圖: