google地图点连线
时间: 2023-07-23 17:05:21 浏览: 67
如果您想在 Google 地图上连接两个点,可以使用 Google Maps JavaScript API 来实现。以下是一些步骤:
1. 首先,您需要在 Google Cloud 平台上创建一个项目,并启用 Maps JavaScript API。
2. 在您的网站或应用程序上,使用 JavaScript 脚本加载 Google 地图。您可以使用以下代码来加载地图:
```html
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194},
zoom: 13
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
```
请将 `YOUR_API_KEY` 替换为您的 Google Cloud 项目的 API 密钥。
3. 添加两个标记(marker)来表示您要连接的两个点。您可以使用以下代码添加标记:
```javascript
var marker1 = new google.maps.Marker({
position: {lat: 37.7749, lng: -122.4194},
map: map,
title: 'San Francisco'
});
var marker2 = new google.maps.Marker({
position: {lat: 37.3363, lng: -121.8907},
map: map,
title: 'San Jose'
});
```
请将 `position` 替换为您要添加标记的位置。
4. 添加一条连线(polyline)来连接这两个标记。您可以使用以下代码添加连线:
```javascript
var line = new google.maps.Polyline({
path: [marker1.getPosition(), marker2.getPosition()],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
```
请将 `strokeColor` 和 `strokeWeight` 替换为您想要的线条颜色和宽度。
完成以上步骤后,您应该能够在 Google 地图上连接两个点了。
相关推荐
![](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)