Google地图实现

原创已于 2023-03-22 20:24:49 修改 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

于 2023-03-22 20:22:35 首次发布

JS 专栏收录该内容

1 篇文章

订阅专栏

这段代码演示了如何利用GoogleMapsJavaScriptAPI创建一个地图，设定中心点的经纬度，设置地图类型为道路图，并添加一个动态弹跳的标记。

<style>
#map {height: 400px; width: 600px; max-width: 100%;}
</style>
<div id="map"></div>
<script>
let map;
function initMap() {
    const myLatLng = { lat: -25, lng: -119};
    const map = new google.maps.Map(document.getElementById("map"), {
        center: myLatLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    const image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
 
    const marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        animation: google.maps.Animation.BOUNCE
    });
}
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=apikey&callback=initMap" async defer></script>

实现地址显示在谷歌地图