百度地图可视化定位经纬度地理位置。

#麻辣小龙虾#

已于 2023-04-18 10:03:44 修改

阅读量2.3k

点赞数 1

分类专栏： web前端文章标签：百度 html javascript

于 2018-09-03 10:06:26 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/82344681

版权

web前端专栏收录该内容

99 篇文章 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" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wtGUkLYyeaLxIGo9lLYK34GX"></script>
	<title>添加多个标注点</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 经纬度数据对象
var pointData = [{
    longitude: 113.25445,
    latitude: 23.142551
},{
    longitude: 114.067596,
    latitude: 22.547189
},{
    longitude: 114.035329,
    latitude: 22.615597
},{
    longitude: 108.337916,
    latitude: 22.837206
}];
var pointD = new BMap.Point(116.404, 39.915); // 经纬度对象
var map = new BMap.Map("allmap");  // 创建百度地图实例
map.enableScrollWheelZoom(); // 允许百度地图缩放
map.centerAndZoom(pointD, 5);  // 初始化地图级别和中心店
function showPoint (pointArr) {
    var myIcon = new BMap.Icon("./map_normal.gif", new BMap.Size(50,50));
    pointArr.forEach(function(item, index){
        var point = new BMap.Point(item.longitude, item.latitude); // 经纬度对象
        var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
        marker.mapDataIndex = index; // 将数据对象的索引存到对象中
        map.addOverlay(marker);  // 将标注添加到地图中
        marker.addEventListener("click",getAttr);
        
    });
}
// 调用的点击事件
function getAttr(){
    // maker对象调用this就会指向他
	var obj = this.getPosition();       //获取marker的位置
    alert("marker的位置是" + obj.lng + "," + obj.lat);
    alert("marker的索引是" + this.mapDataIndex);
     // window.location.href="http://www.baidu.com";   
}
showPoint(pointData);   // 地图上显示对应的图标
	// // 百度地图API功能
	// var map = new BMap.Map("allmap");
	// var point = new BMap.Point(113.25445, 23.142551);
    // var point1 = new BMap.Point(114.067596,22.547189);
    // var point2 = new BMap.Point(114.035329,22.615597);
    // var point3 = new BMap.Point(108.337916,22.837206);
    // map.enableScrollWheelZoom(); 
	// map.centerAndZoom(point3, 5);  // 初始化地图级别和中心店
	// var marker1 = new BMap.Marker(point);  // 创建标注
	// var marker2 = new BMap.Marker(point1);  // 创建标注
	// var marker3 = new BMap.Marker(point2);  // 创建标注
	// var marker4 = new BMap.Marker(point3);  // 创建标注
	// map.addOverlay(marker1);              // 将标注添加到地图中
	// map.addOverlay(marker2);              // 将标注添加到地图中
	// map.addOverlay(marker3);              // 将标注添加到地图中
	// map.addOverlay(marker4);              // 将标注添加到地图中
	// marker.addEventListener("click",getAttr);
	// function getAttr(){
	// 	var p = marker.getPosition();       //获取marker的位置
	// 	alert("marker的位置是" + p.lng + "," + p.lat);
    //    // window.location.href="http://www.baidu.com";   
	// }
</script>

#麻辣小龙虾#

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
百度地图可视化定位经纬度地理位置。

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0
复制链接

扫一扫