生活随笔
收集整理的這篇文章主要介紹了
百度地图-根据经纬度定位示例-百度地图单点标注（整理）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一：
效果圖：
<!DOCTYPE html
>
<html
lang="zh"><head
><meta
charset="UTF-8"><meta
name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv
="X-UA-Compatible" content="ie=edge"><title
>百度地圖定位
</title
><script
type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zMhzmGoeymG4WuzyRTdYD1GufPGlUmhs"></script
> <!-- 百度地圖引入 --
><script
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script
></head
><body
><div
id="container" style="width: 600px;height: 500px;"></div
></body
><script
type="text/javascript">function ShowMap
(zuobiao, name, addrsee, phone, chuanzhen, zoom
) {var arrzuobiao
= zuobiao.split
(',');var map
= new BMap.Map
("container");map.addControl
(new BMap.OverviewMapControl
());map.centerAndZoom
(new BMap.Point
(arrzuobiao
[0], arrzuobiao
[1]), zoom
);map.addControl
(new BMap.NavigationControl
());var marker
= new BMap.Marker
(new BMap.Point
(arrzuobiao
[0], arrzuobiao
[1]));map.addOverlay
(marker
);var infoWindow
= new BMap.InfoWindow
('<p style="color: #bf0008;font-size:14px;">' + name +
'</p><p style="font-size:14px;">地址：' +addrsee +
'</p><p style="font-size:14px;">電話：' + phone +
'</p><p style="font-size:14px;">傳真：' +chuanzhen +
'</p>');marker.addEventListener
("click",
function() {this.openInfoWindow
(infoWindow
);});marker.openInfoWindow
(infoWindow
);}var loc
;var isMapInit
= false;//監聽定位組件的message事件window.addEventListener
('message', function
(event
) {loc
= event.data
; // 接收位置信息 //console.log
('location', loc
);if (loc
&& loc.module
== 'geolocation') { //定位成功,防止其他應用也會向該頁面post信息，需判斷module是否為
'geolocation'var markUrl
= 'https://apis.map.qq.com/tools/poimarker' +
'?marker=coord:' + loc.lat +
',' + loc.lng +
';title:我的位置;addr:' +
(loc.addr
|| loc.city
) +
'&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';//給位置展示組件賦值// document.getElementById
('markPage').src
= markUrl
;var lng
= loc.lng //經度var lat
= loc.lat //維度console.log
(lng
)ShowMap
('' + lng +
',' + lat +
'',
'dome', loc.city,
'1388888888',
'010-88888888',
'20');} else {console.log
('定位失敗');}},
false);ShowMap
('120.167829,35.969977',
'公司地址',
'山東省青島市黃島區江山南路480號研創中心2號樓904',
'150-5405-4533',
'600-798-0579',
'20');</script
>
</html
>
方法二：
效果圖：
<!DOCTYPE html
>
<html
lang="zh">
<head
><meta
charset="UTF-8"><meta
name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv
="X-UA-Compatible" content="ie=edge"><title
></title
><script
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=zMhzmGoeymG4WuzyRTdYD1GufPGlUmhs"></script
> <!-- 百度地圖引入 --
><script
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script
>
</head
>
<body
><div
id="container" style="width: 500px;height: 500px;"></div
>
</body
>
<script
type="text/javascript">var map
= new BMapGL.Map
('container'); // 初始化地圖var lng
= 120.167829; //4號樓var lat
= 35.969977; // var point
= new BMapGL.Point
(lng, lat
);map.centerAndZoom
(point,
30);map.enableScrollWheelZoom
(true
);map.setCenter
(point
); // 設置地圖中心點var marker1
= new BMapGL.Marker
(point
);// 在地圖上添加點標記map.addOverlay
(marker1
);
</script
>
</html
>
方法三：
效果圖：
<!DOCTYPE html
>
<html
><head
><meta
charset="utf-8" /
><title
>百度地圖單點標注
</title
><script
type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zMhzmGoeymG4WuzyRTdYD1GufPGlUmhs"></script
><script
src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script
><script
type="text/javascript">// 引入js文件-可新建文件引入
! function
(t
) {var n
= function
(t
) {this.init
(t
)};n.prototype
= {init: function
(n
) {var i
= {id:
"",title:
{text:
"",className:
""},content:
{text:
[],className:
""},point:
{lng:
0,lat:
0},type:
[],level:
15,zoom:
!1};if (this.opts
= t.extend
({}, i, n
),
!this.opts.id
) throw
"id不能為空";this.renderMap
()},renderMap:
function() {var t
= this.opts,n
= t.id,i
= t.level
|| 15,o
= this.map
= new BMap.Map
(n
),e
= this.point
= new BMap.Point
(t.point.lng, t.point.lat
);o.centerAndZoom
(e, i
), this.addControl
()},addControl:
function() {var t
= this.opts,n
= this.map,i
= t.type,o
= t.zoom
;if (n.addControl
(new BMap.NavigationControl
), n.addControl
(new BMap.ScaleControl
), n.addControl
(new BMap.OverviewMapControl
), o
&& n.enableScrollWheelZoom
(!0), i.length
> 0) {var e
= this.getMapType
(i
);n.addControl
(new BMap.MapTypeControl
({mapTypes: e
}))}this.createMarker
()},getMapType: function
(n
) {var i
= [],o
= {"地圖": BMAP_NORMAL_MAP,
"衛星": BMAP_SATELLITE_MAP,
"三維": BMAP_PERSPECTIVE_MAP
};return t.each
(n, function
(t, n
) {n
in o
&& i.push
(o
[n
])}), i
},createMarker:
function() {var t
= this,n
= this.map,i
= this.point,o
= new BMap.Marker
(i
),e
= this.opts.icon
;e
&& e.url
&& (o
= new BMap.Marker
(i,
{icon: new BMap.Icon
(e.url, new BMap.Size
(e.width, e.height
))})), n.addOverlay
(o
), this.renderInfoWindow
(), o.addEventListener
("click",
function() {t.openInfoWindow
()})},renderInfoWindow:
function() {this.map, this.point
;var n
= this.opts,i
= n.content.text,o
= "";i.length
> 0 && t.each
(i, function
(t, i
) {o
+= '<div class="' + n.content.className +
'">' + i +
"</div>"});this.infoWindow
= new BMap.InfoWindow
(o,
{width: n.width
|| 0,height: n.height
|| 0,title:
'<div class="' + n.title.className +
'">' + n.title.text +
"</div>"});this.openInfoWindow
()},openInfoWindow:
function() {var t
= this.map,n
= this.point,i
= this.infoWindow
;i.isOpen
() || t.openInfoWindow
(i, n
)}}, window.BaiduMap
= n
}(jQuery
);</script
><style
>*
{margin:
0;padding:
0;}.left,.right
{width:
100%
;height: 700px
;padding: 40px 20px
;box-sizing: border-box
;}.left
{height: 500px
;}.container
{width:
50%
;height:
100%
;float: left
;}.des
{float: right
;width:
48%
;height:
100%
;border: 1px dashed box-sizing: border-box
;}.info
{margin-top: 20px
;padding-left: 20px
;color: font-size: 20px
;margin-bottom: 40px
;text-align: center
;}pre
{font-size: 14px
;}.title
{font-size: 14px
;font-weight: bold
;color:
}.content
{font-size: 13px
;color: margin-top: 6px
;}</style
></head
><body
><div
class="left"><div
id="container1" class="container"></div
><div
class="des"><p
class="info">實例參數
</p
><pre
>new BaiduMap
({id:
"container1",title:
{text:
"北京故宮博物院",className:
"title"},content:
{className:
"content",text:
["地址：北京市東城區東華門大街",
"電話：(010)65131892"]},point:
{lng:
"116.412222",lat:
"39.912345"}}); </pre
></div
></div
><div
class="right"><div
id="container2" class="container"></div
><div
class="des"><p
class="info">實例參數
</p
><pre
>new BaiduMap
({id:
"container2",title:
{text:
"北京故宮博物院",className:
"title"// 選填--樣式類名
},content:
{className:
"content",// 選填--樣式類名text:
["地址：北京市東城區東華門大街",
"電話：(010)65131892"]},point:
{lng:
"116.412222",lat:
"39.912345"},level:
15,// 選填--地圖級別--
(默認15
)zoom:true,// 選填--是否啟用鼠標滾輪縮放功能--
(默認false
)type:
["地圖",
"衛星",
"三維"],// 選填--顯示地圖類型--
(默認不顯示
)width:
320,// 選填--信息窗口width--
(默認自動調整
)height:
70,// 選填--信息窗口height--
(默認自動調整
)icon:
{ // 選填--自定義icon圖標url:
"img/icon.png",width:
36,height:
36}});</pre
></div
></div
><script
type="text/javascript">new BaiduMap
({id:
"container1",title:
{text:
"北京故宮博物院",className:
"title"},content:
{className:
"content",text:
["地址：北京市東城區東華門大街",
"電話：(010)65131892"]},point:
{lng:
116.412222,lat:
39.912345}});new BaiduMap
({id:
"container2",title:
{text:
"北京故宮博物院",className:
"title"},content:
{className:
"content",text:
["地址：北京市東城區東華門大街",
"電話：(010)65131892"]},point:
{lng:
"116.412222",lat:
"39.912345"},level:
15,zoom: true,type:
["地圖",
"衛星",
"三維"],width:
320,height:
70,icon:
{url:
"img/icon.png",width:
36,height:
36}});</script
></body
></html
>
總結
以上是生活随笔為你收集整理的百度地图-根据经纬度定位示例-百度地图单点标注（整理）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
