admin管理员组文章数量:1567296
html结构
<!DOCTYPE html>
<html>
<head>
<title> Geocoder地图</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div style="display: none">
<input
id="pac-input"
class="controls"
type="text"
placeholder="搜索地址"
/>
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br />
<!-- <strong>Place ID</strong>: <span id="place-id"></span><br /> -->
<span id="place-address"></span>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis/maps/api/js?key=AIzaSyC_-U9VyoV79Sd1RR6V1CqFTSYisxRUVe4&callback=initMap&libraries=places&v=weekly"
async
></script>
</body>
</html>
css结构
#map {
width: 100%;
height: 800px;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
js结构
let map;
function initMap() {
//用于返回的经纬度值
var latLng = null;
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 23.7, lng: 120.6 },
zoom: 13,
});
//声明用于标注的点
const marker = new google.maps.Marker({ map: map, draggable:true,visible:false });
//监听标注点的拖动
marker.addListener("dragend", (event)=>{
console.log("拖动结束", event.latLng.toJSON());
});
//点击地图获取点
map.addListener("click", (event)=>{
marker.setPosition(event.latLng.toJSON());
console.log("点击结束",event.latLng.toJSON())
marker.setVisible(true);
});
const input = document.getElementById("pac-input");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo("bounds", map);
// Specify just the place data fields that you need.
autocomplete.setFields(["place_id", "geometry", "name", "formatted_address"]);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
const geocoder = new google.maps.Geocoder();
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.place_id) {
return;
}
geocoder.geocode({ placeId: place.place_id }, (results, status) => {
if (status !== "OK" && results) {
window.alert("Geocoder failed due to: " + status);
return;
}
map.setZoom(11);
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
marker.setVisible(true);
});
});
}
官方地址https://developers.google/maps/documentation/javascript/reference/marker?hl=en
版权声明:本文标题:跳转谷歌地图 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1725994078a1051828.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论