百度地图JS-API
程序员文章站
2022-06-10 10:49:17
...
百度地图:创建地图;创建自定义标注;点击标注跳转;全景地图;(项目:徐天下)
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=HWCnGTqVC*************&v=3.0"></script>
<script>
var map = new BMap.Map("allmap");
var point = new BMap.Point(119.95,31.78);
map.centerAndZoom(point, 16);
//标注自定义图标的地点
var myIcon_ci = new BMap.Icon("http://www.cperp.com/lpfbootstrap/images/xv/ci.png", new BMap.Size(60,60));//60 60为自定义图片的尺寸
var point2 = new BMap.Point(119.951,31.779);
var marker2 = new BMap.Marker(point2,{icon:myIcon_qi}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
// 添加文字说明有bug :文字背景框过小
// var label = new BMap.Label("常州市某某有限公司",{offset:new BMap.Size(20,-10)});
// label.setStyle({
// color : "black",
// fontSize : "12px",
// height : "20px",
// lineHeight : "20px",
// backgroundColor:"white"
//
// });
// marker2.setLabel(label);
// 监听事件:点击地图上的覆盖点跳转
marker2.addEventListener("click", function(){
window.location.href="http://xxxxxxxxxxx"
});
var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件
map.addControl(top_left_navigation);
map.addTileLayer(new BMap.PanoramaCoverageLayer());
var stCtrl = new BMap.PanoramaControl(); //构造全景控件
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);//添加全景控件
</script>