[html] 如何在网页中嵌入公司地址的地图？

最新推荐文章于 2024-11-21 10:30:44 发布

前端小歌谣

最新推荐文章于 2024-11-21 10:30:44 发布

阅读量835

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # HTML面试题汇总

本文链接：https://blog.csdn.net/weixin_43392489/article/details/115210116

本文将介绍如何在HTML网页中嵌入公司地址的地图，适合前后端开发者学习，通过实例分享详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[html] 如何在网页中嵌入公司地址的地图？

<script src='http://api.map.baidu.com/api?v=2.0&ak=BG9Wtw7egUbIQHPjG9ayOLQO'> </script> <script> (function(){ var map = new BMap.Map("container"); //设置底图 map.centerAndZoom("深圳", 18); //初始化地址，查询的地址所在市 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小

function searchByStationName() {
map.clearOverlays();//清空原来的标注
var keyword = "深圳市罗湖区红桂路2068号红桂大厦一楼";//查询的详细地址
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
map.centerAndZoom(poi.point, 18);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
var content = keyword;
var infoWindow = new BMap.InfoWindow("

" + content + "
");
marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); })