引入百度地图并展示标记点
程序员文章站
2022-07-03 18:12:21
...
一、基础代码
1.HTML和样例数据
<!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"/>
<style type="text/css">
body, html, #map{width: 800px;height: 500px;overflow: hidden;margin: 0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的AK"></script>
<title>地图标记点展示</title>
</head>
<body>
<div id="map" style="height:80%"></div>
</body>
</html>
<script type="text/javascript">
//样例数据
var data = [
{name: '陕西省渭南市富平县到贤镇庄镇村槐园组', value: [109.34063,34.86755]},
{name: '陕西省渭南市华州区莲花寺镇长寿坡村', value: [109.828194,34.507648]},
{name: '陕西省渭南市临渭区乐天大街西段天人花园', value: [109.48159,34.514759]},
{name: '临渭区下吉镇高钞村六组', value: [109.5459,34.75659]},
{name: '陕西省渭南市蒲城县桥陵镇赵山村五组', value: [109.4968,34.99036]},
{name: '陕西省渭南市大荔县朝邑镇坝一村', value: [109.94001,34.788658]},
{name: '临渭区辛市街道', value: [109.5299,34.572449]},
{name: '陕西省渭南市大荔县苏村镇洪善村', value: [109.866707,34.641651]},
{name: '陕西省渭南市华州区李坡行政村', value: [109.778931,34.482914]},
{name: '陕西省渭南市华州区大明镇桥峪水库管理处邻', value: [109.725883,34.37817]}
];2.百度地图API功能
// 百度地图API功能
var map = new BMap.Map("allmap", {enableMapClick: true}); // 创建Map实例
map.centerAndZoom(new BMap.Point(109.5459, 34.86755), 10); // 初始化地图,设置中心点坐标和地图级别，地图级别越小范围越大
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("陕西省"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放二、标记海量数据和单一数据
1.标记海量数据
var points = [];
for (var k = 0; k < data.length; k++) {
points.push(new BMap.Point(data[k].value[0], data[k].value[1]));
}
var options = {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_STAR,
color: '#ff0000'
};
var pointCollection = new BMap.PointCollection(points, options);
pointCollection.addEventListener('click', function (e) {
alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件
});
map.addOverlay(pointCollection);
</script>
2.标记单一数据
var marker = new BMap.Marker(new BMap.Point(109.5459, 34.86755));
map.addOverlay(marker);
</script>三、简单介绍
1.ShapeType
2.SizeType