要在不使用iFrame的情况下添加Google地图导航按钮,您可以使用Google Maps JavaScript API。以下是一个示例代码:
标签中:
请确保将YOUR_API_KEY
替换为您自己的Google Maps API密钥。
元素:
- 在您的JavaScript文件中,使用以下代码初始化Google地图并添加一个导航按钮:
// 初始化地图
function initMap() {
// 设置地图初始位置
var myLatLng = { lat: 37.7749, lng: -122.4194 };
// 创建地图对象并将其显示在指定的div元素中
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 12
});
// 创建导航按钮
var directionsButton = document.createElement('button');
directionsButton.textContent = '导航';
directionsButton.classList.add('directions-button');
// 将导航按钮添加到地图的控件位置
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(directionsButton);
// 在导航按钮被点击时执行导航操作
directionsButton.addEventListener('click', function () {
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
// 设置起点和终点
var start = 'San Francisco, CA';
var end = 'Los Angeles, CA';
// 创建导航请求
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
// 发送导航请求并在地图上绘制导航路线
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
});
}
// 在页面加载完成时初始化地图
google.maps.event.addDomListener(window, 'load', initMap);
在上述代码中,我们首先创建一个地图对象并将其显示在指定的元素中。然后,我们创建一个导航按钮,并将其添加到地图的控件位置(此示例中为右上角)。最后,我们在导航按钮被点击时执行导航操作,使用DirectionsService
发送导航请求并在地图上绘制导航路线。
请注意,您需要将起点和终点更改为您自己的地址。
这样,您就可以在不使用iFrame的情况下添加Google地图导航按钮了。
相关内容