百度地图api的使用（pc）

最新推荐文章于 2020-09-22 14:20:24 发布

lppklm

最新推荐文章于 2020-09-22 14:20:24 发布

阅读量846

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/lppklm/article/details/39341759

版权

php 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>搜房招聘地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map =new BMap.Map("container"); // 创建Map实例
//var point =new BMap.Point(116.404, 39.915); // 创建点坐标
//map.centerAndZoom(point, 1400); // 初始化地图,设置中心点坐标和地图级别。
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(200,127),{ //小车图片
offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(-25, -40) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var points = [new BMap.Point(116.303081,39.831939),new BMap.Point(116.320791,40.003682)]; //1个坐标点
//var marker0 =new BMap.Marker(points[0],{icon:myIcon});
var marker0 =new BMap.Marker(points[0]);
var marker1 =new BMap.Marker(points[1]);
//marker0.enableDragging(); 可拖拽
//var label0 = new BMap.Label(points[0],{});
map.addOverlay(marker0);
map.addOverlay(marker1);
map.setViewport(points); //调整地图的最佳视野为显示标注数组point
//var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM});
//左上角，添加默认缩放平移控件
//var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM});
//右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
*/
//map.addControl(top_left_control);
map.addControl(top_left_navigation);
marker0.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//map.addControl(top_right_navigation);
var opts0 = {title : '<span style="font-size:14px;color:#0A8021">丰台科技园-地铁站</span>'};
var opts1 = {title : '<span style="font-size:14px;color:#0A8021">如家快捷酒店</span>'};
var infoWindow0 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts0);
var infoWindow1 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts1);
marker0.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow0);});
marker1.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow1);});
//map.openInfoWindow(infoWindow0, points[0]);//默认打开窗口
</script>

lppklm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图api的使用（pc）

搜房招聘地图var map =new BMap.Map("container"); // 创建Map实例//var point =new BMap.Point(116.404, 39.915); // 创建点坐标//map.centerAndZoom(point, 1400); // 初始化地图,设置中心点坐标和地图级别。var my
复制链接

扫一扫