CarsonSlovoka/demo.md

## demo.md

      
    Raw
  

              demo.md
            
          
## map.html
<!DOCTYPE html>
<html>
<head>
  <title>顯示經緯度座標和繪製圓圈</title>
  <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 100%;"></div>
</body>

<script>
  window.initMap = () => {
    let circle
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 2,
      center: { lat: 0, lng: 0 },
    })

    map.addListener("click", (event) => {
      const lat = event.latLng.lat()
      const lng = event.latLng.lng()
      const latlng = { lat, lng }

      if (circle) {
        circle.setMap(null)
      }

      const radius = prompt("請輸入半徑(公里):")
      if (radius) {
        circle = new google.maps.Circle({
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          map,
          center: latlng,
          radius: parseFloat(radius) * 1000, // 轉換成公里
        })
      }
      alert(`您點擊的位置經緯度為: (${lat}, ${lng})`)
    })
  }
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>顯示經緯度座標和繪製圓圈</title>
	<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap"></script>
	</head>
	<body>
	<div id="map" style="height: 500px; width: 100%;"></div>
	</body>

	<script>
	window.initMap = () => {
	let circle
	const map = new google.maps.Map(document.getElementById("map"), {
	zoom: 2,
	center: { lat: 0, lng: 0 },
	})

	map.addListener("click", (event) => {
	const lat = event.latLng.lat()
	const lng = event.latLng.lng()
	const latlng = { lat, lng }

	if (circle) {
	circle.setMap(null)
	}

	const radius = prompt("請輸入半徑(公里):")
	if (radius) {
	circle = new google.maps.Circle({
	strokeColor: "#FF0000",
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: "#FF0000",
	fillOpacity: 0.35,
	map,
	center: latlng,
	radius: parseFloat(radius) * 1000, // 轉換成公里
	})
	}
	alert(`您點擊的位置經緯度為: (${lat}, ${lng})`)
	})
	}
	</script>
	</html>