在html中创建一个地图链接,当点击此链接时出现在js中创建的javascript地图,可以通过调用百度地图的api实现,并且讲此地图封装成函数,可以用此函数在不同的html页面点击时出现不同地方的地图
时间: 2024-02-17 20:59:53 浏览: 18
好的,这是一个很好的问题。首先,你需要在你的HTML页面中创建一个链接,使用以下代码:
```
<a href="#" onclick="showMap()">点击这里查看地图</a>
```
接下来,你需要在JavaScript中创建一个名为`showMap()`的函数,该函数将通过调用百度地图API来显示地图。以下是一个示例代码:
```javascript
function showMap() {
// 创建地图实例
var map = new BMap.Map("mapContainer");
// 创建点坐标
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// 添加地图控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
// 在地图上添加标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
```
上述代码将创建一个地图实例,并在地图上添加一个标注。你可以根据自己的需求调整地图的中心点坐标、地图级别和标注位置。
最后,将上述函数封装成一个可以在不同页面使用的函数,你可以将其放在一个单独的JavaScript文件中,并在HTML页面中使用`<script>`标签引入该文件。这样,在不同的HTML页面,你只需要调用该函数即可显示地图。
希望这可以帮到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)