Html显示地图

最新推荐文章于 2024-10-02 11:34:49 发布

iteye_5061

最新推荐文章于 2024-10-02 11:34:49 发布

阅读量524

点赞数

分类专栏： Html 文章标签：地图显示 Html Html地图显示 Web地图显示地图

本文链接：https://blog.csdn.net/iteye_5061/article/details/82680613

版权

Html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Html可以通过JS来实现第三方地图的显示，如: 高德；

效果如下：浏览器小区域和全屏展示

代码如下：把key换成自己申请的key值

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=667cbbf11eee369b935122434f031a4d"></script>


<div id="container" style="width:500px; height:500px"></div>

高德配置（开发者平台-->控制台）

<script >

    var map = new AMap.Map('container',{
        zoom: 10,
        icon: "punch_dw.png",
        center: [113.466123,22.32666]
    });
    var marker;
    addMarker();
    //在地图上添加图片标记函数
    function addMarker(){
        marker=new AMap.Marker({
            icon:new AMap.Icon({    //复杂图标
                size:new AMap.Size(125,125),//图标大小
                image:"punch_dw.png", //大图地址
                imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置
            }),
            position:new AMap.LngLat(113.466123,22.32666)
        });
        marker.setMap(map);  //在地图上添加点

    }

</script>