您的位置：首页 > 其它

百度地图2.0 点定位

2017-04-10 15:41 162 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
</head>
<body>
<div id="allmap" style="height: 550px"></div>

<script>
//百度地图API功能
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=kVBXX7MlfMkukl1DgtAjLsFX&callback=init";
document.body.appendChild(script);
}
function init(){
var sContent =
"<p style='margin:0;line-height:1.5;font-size:14px;'>地址：海淀区中关村大街18号中关村互联网</p>" +
"<p style='margin:0;line-height:1.5;font-size:14px; text-indent: 3em'>教育创新中心南侧1号</p>" +
"<p style='margin:0;line-height:1.5;font-size:14px;'>电话：400-083-4525</p>" +
"</div>";
var opts = {
width : 280,     // 信息窗口宽度
height: 95,     // 信息窗口高度
title : "<h4 style='margin: 2px 0;padding:0.2em 0; color#666;border-bottom: 2px solid #333;'>西普教育-北京总部</h4>" , // 信息窗口标题
enableMessage:false//设置允许信息窗发送短息
};
var map = new BMap.Map("allmap", {enableMapClick: false});  // 创建Map实例
var point = new BMap.Point(116.324164, 39.988805);   // 创建点坐标
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(sContent,opts);  // 创建信息窗口对象
map.enableScrollWheelZoom(true);                 //启用滚轮放大缩小
map.centerAndZoom(point, 15);
map.addOverlay(marker);
marker.openInfoWindow(infoWindow);
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
}
window.onload = loadJScript;  //异步加载地图
</script>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PPnlF8fkS5tZkCAyRSrkc2Rz&s"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>

</head>
<body>
<div id="allmap" style="height: 500px;width:100%;overflow: hidden;"></div>
<script type="text/javascript">
//百度地图API功能

var map = new BMap.Map('allmap', {enableMapClick: false});
var poi = new BMap.Point(116.324164, 39.988805);
map.centerAndZoom(poi, 18);
map.enableScrollWheelZoom();
var content = '<div style="margin:0;line-height:18px;padding:5px;color: #494d4d;font-size:13px;">' +
'<img src="http://www.simpleware.com.cn/common/images/logo.png" style="float:right;zoom:1;overflow:hidden;width:115px;margin-top:5px;margin-left:3px;"/>' +
'地址：中关村大街18号中关村互联网教育创新中心南侧1号<br/>电话：400-083-4525' +
'</div>';
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: "<b style='color: #333;font-size: 15px'>西普教育-北京总部</b>",      //标题
width: 300,             //宽度
height: 65,              //高度
panel: "panel",         //检索结果面板
enableAutoPan: true,     //自动平移
searchTypes: [
//BMAPLIB_TAB_SEARCH,   //周边检索
BMAPLIB_TAB_TO_HERE,  //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(poi); //创建marker对象
// marker.enableDragging(); //marker可拖拽
searchInfoWindow.open(marker);
//
marker.addEventListener("click", function (e) {
searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地图中添加marker
//隐藏废弃的短信图标
document.getElementById('BMapLib_sendToPhone0').style.display = "none";

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航