【web端】百度地图api

时间:2023-01-06 14:54:42

百度地图js加载

页面引入:

修改申请的密钥:<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

下面的js跟css用于点击创建的地图标注弹窗信息框
<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" />

// 百度地图   经度 纬度 地址信息
function showMap(Longitude, Latitude,address) {
setTimeout(function () {//添加延时加载。解决问题地图缩放
var map = new BMap.Map("maps");
var myCity = new BMap.LocalCity();
myCity.get(function (res) {
map.centerAndZoom(res.center, res.level);
});
//根据经纬度添加地图标签
if(Longitude!=""&&Longitude!=null&&Latitude!=null&&Latitude!=""){
var new_point = new BMap.Point(Longitude,Latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker);
map.centerAndZoom(new_point, 15);
//添加点击标注弹窗
var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, address, {
title: "地址信息", //标题
width: 290, //宽度
height: 40, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
]
});
marker.addEventListener("click", function(){
searchInfoWindow3.open(marker);
});
}
map.enableScrollWheelZoom(true);
}, 300);
}