创建百度地图，多个地址切换

最新推荐文章于 2020-05-28 19:44:16 发布

web_xyk

最新推荐文章于 2020-05-28 19:44:16 发布

阅读量1.2k

点赞数

分类专栏： web前端开发文章标签：百度地图地图标注

本文链接：https://blog.csdn.net/web_xyk/article/details/81120200

版权

web前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.先注册百度账号

2.登录百度地图开放平台点击跳转登录

3.申请秘钥地址

引入地图js文件时最后的 ak即自己申请的秘钥,记得更换

<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 {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }

    #allmap {
        height: 300px;
        width: 50%;
        float: left;
    }

    ul {
        float: left;
    }

    ul li {
        height: 40px;
        cursor: pointer;
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iwfYuKQm6uTZzuFUneI7KMKhlT6IF6mi"></script>
    <title>坐标定位</title>
</head>

<body>
    <div id="allmap"></div>
    <ul id="list">
        <li data-longitude="116.403963" data-latitude="39.915119">天安门</li>
        <li data-longitude="116.314688" data-latitude="39.984729">创富大厦</li>
    </ul>
</body>

</html>
<script type="text/javascript">

// 用经纬度设置地图中心点
var list = document.getElementById('list'),
		map = new BMap.Map("allmap"),
    showMark;

// 百度地图API功能
map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11);
map.enableScrollWheelZoom(true);

showMark = function(e){
	e = e || window.event;
	e = e.target || e.srcElement;
        if(e.tagName.toLowerCase() === 'ul') return;
	while(e.tagName.toLowerCase() !== 'li'){
        e = e.parentNode;
	}
	var longitude = e.getAttribute('data-longitude'),
	    latitude = e.getAttribute('data-latitude');
	map.clearOverlays();
	map.centerAndZoom(new BMap.Point(longitude,latitude),18);
	
	var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中
}
if (window.addEventListener) {
  list.addEventListener('click', showMark, false);
} else {
  list.attachEvent('onclick', showMark);
}
</script>

web_xyk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
创建百度地图，多个地址切换

1.先注册百度账号2.登录百度地图开放平台点击跳转登录3.申请秘钥地址引入地图js文件时最后的 ak即自己申请的秘钥,记得更换&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="...
复制链接

扫一扫