html网页生成动态地图

主要从http://api.map.baidu.com/lbsapi/creatmap/index.html中获取代码而得:

例如:<script type="text/javascript">

    //创建和初始化地图函数:

    function initMap() {

        createMap(); //创建地图

        setMapEvent(); //设置地图事件

        addMapControl(); //向地图添加控件

        addMarker(); //向地图中添加marker

    }

 

    //创建地图函数:

    function createMap() {

        var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图

        var point = new BMap.Point(106.54904, 29.60076); //定义一个中心点坐标

        map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中

        window.map = map; //将map变量存储在全局

    }

    //地图事件设置函数:

    function setMapEvent() {

        map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)

        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

        map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)

        map.enableKeyboard(); //启用键盘上下左右键移动地图

    }

    //地图控件添加函数:

    function addMapControl() {

        //向地图中添加缩放控件

        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });

        map.addControl(ctrl_nav);

        //向地图中添加缩略图控件

        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });

        map.addControl(ctrl_ove);

        //向地图中添加比例尺控件

        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });

        map.addControl(ctrl_sca);

    }

    //标注点数组

    var markerArr = [{ title: "公司名称", content: "公司地址", point: "106.549449|29.600407", isOpen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5} }

 ];    

    //创建marker

    function addMarker() {

        for (var i = 0; i < markerArr.length; i++) {

            var json = markerArr[i];

            var p0 = json.point.split("|")[0];

            var p1 = json.point.split("|")[1];

            var point = new BMap.Point(p0, p1);

            var iconImg = createIcon(json.icon);

            var marker = new BMap.Marker(point, { icon: iconImg });

            var iw = createInfoWindow(i);

            var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });

            marker.setLabel(label);

            map.addOverlay(marker);

            label.setStyle({

                borderColor: "#808080",

                color: "#333",

                cursor: "pointer"

            });

            (function () {

                var index = i;

                var _iw = createInfoWindow(i);

                var _marker = marker;

                _marker.addEventListener("click", function () {

                    this.openInfoWindow(_iw);

                });

                _iw.addEventListener("open", function () {

                    _marker.getLabel().hide();

                })

                _iw.addEventListener("close", function () {

                    _marker.getLabel().show();

                })

                label.addEventListener("click", function () {

                    _marker.openInfoWindow(_iw);

                })

                if (!!json.isOpen) {

                    label.hide();

                    _marker.openInfoWindow(_iw);

                }

            })()

        }

    }

    //创建InfoWindow

    function createInfoWindow(i) {

        var json = markerArr[i];

        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");

        return iw;

    }

    //创建一个Icon

    function createIcon(json) {

        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })

        return icon;

    }

    initMap(); //创建和初始化地图

</script>   

 <!--引用百度地图API-->

<style type="text/css">

    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}

    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

 #dituContent div span.BMap_Marker.BMap_noprint{background: url('/images/marker_red.png') !important;height:26px !important;}

 #dituContent .BMapLabel{background-color:white; border:0px !important;left:15px !important;font-size:14px !important;font-weight:bold !important;color:Red !important;font-family:'宋体' !important;}

  #dituContent span.BMap_Marker div{width:0px !important;height:0px !important;}

</style>

### 回答1: 要在HTML生成地图并显示经纬度,您可以使用HTML5的地图API以及JavaScript来实现。以下是一个基本示例: 首先,在HTML文件中创建一个具有地图容器的 `<div>` 元素: ``` <div id="map" style="width: 100%; height: 400px;"></div> ``` 然后,在JavaScript中使用地图API来初始化地图并显示经纬度。以下是一个使用Google地图API的示例: ``` <script> function initMap() { // 创建一个地图对象,指定显示地图的容器和初始中心位置的经纬度 var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.7128, lng: -74.0060}, zoom: 8 // 指定缩放级别 }); // 创建一个标记点,并指定其经纬度位置 var marker = new google.maps.Marker({ position: {lat: 40.7128, lng: -74.0060}, map: map, title: 'New York' // 可选的标记点标题 }); } </script> ``` 最后,在文档的底部调用 `initMap()` 函数来初始化地图: ``` <body> <div id="map" style="width: 100%; height: 400px;"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> </body> ``` 在上述代码中,请确保将 `YOUR_API_KEY` 替换为您自己的Google地图API密钥。 通过这种方式,您可以在HTML页面上生成一个地图,并在指定的经度和纬度位置显示一个标记点。您可以根据需要添加更多的标记点或自定义地图的样式。 ### 回答2: HTML本身无法直接生成经纬度地图,因为HTML只是一种标记语言,主要用于描述网页的结构和内容,并不能直接处理地理信息。但是,我们可以通过HTML结合JavaScript来实现生成经纬度地图的功能。 首先,我们可以在HTML中添加一个地图容器的元素,比如一个div标签,通过设置该元素的宽度和高度,来定义地图的大小。 然后,我们可以使用JavaScript来获取经纬度数据,并利用地图API(如Google Maps、百度地图等)来生成地图。可以通过调用地图API提供的函数,将经纬度数据作为参数传入,实现在地图上显示对应位置的功能。 具体地,我们可以使用JavaScript编写一个函数,通过调用地图API的接口来生成地图。在函数中,我们可以使用HTML的DOM操作方法来获取经纬度数据,然后将数据传递给地图API,最后将生成地图插入到HTML页面中的地图容器中。 例如,可以使用以下代码生成一个简单的经纬度地图: ```html <!DOCTYPE html> <html> <head> <style> /* 设置地图容器的样式 */ #map { width: 500px; height: 400px; } </style> </head> <body> <!-- 地图容器 --> <div id="map"></div> <script> function initMap() { // 获取经纬度数据 var latitude = 40.7128; var longitude = -74.0059; // 创建地图对象 var map = new google.maps.Map(document.getElementById('map'), { center: {lat: latitude, lng: longitude}, zoom: 8 }); // 在地图上添加标记 var marker = new google.maps.Marker({ position: {lat: latitude, lng: longitude}, map: map, title: 'New York City' }); } </script> <!-- 引入地图API的脚本 --> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html> ``` 上述代码中,通过调用Google Maps API实现了一个简单的经纬度地图。我们在其中设置了一个地图容器的div元素,然后在JavaScript中获取经纬度数据(这里设置了纽约市的经纬度),通过调用地图API的函数来生成地图,并在地图上添加了一个标记。 需要注意的是,这个示例中引入了Google Maps API,并使用了你自己的API密钥。API密钥是访问地图API的凭证,可以通过注册Google开发者帐号来获取。同时,在实际开发中,我们还可以根据需求调整地图的其他参数,比如缩放级别、地图类型等。 总结起来,通过结合HTML和JavaScript,我们可以获取经纬度数据并利用地图API来生成经纬度地图。这样可以在网页中实现地理位置的可视化展示。 ### 回答3: HTML本身并不直接生成地图,但可以通过使用JavaScript代码来实现。以下是一种基本的方式来实现在HTML生成地图,使用经纬度来定位位置。 1. 首先,你需要一个HTML文件。在这个文件中,你需要引入一个地图API,比如Google Maps API或者Mapbox API。例如,在`<head>`标签中添加以下代码,引入Google Maps API: ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ``` 请注意,这里的`YOUR_API_KEY`是你在Google Cloud Console上创建的API密钥。 2. 接下来,在`<body>`标签中添加一个`<div>`元素,用来容纳地图。给这个`<div>`设置固定的宽度和高度,并给它一个唯一的id,例如`map`: ```html <div id="map" style="width: 100%; height: 400px;"></div> ``` 3. 在JavaScript代码中,使用`<script>`标签将代码嵌入到HTML文件中。在这个代码中,你可以通过经纬度来设置地图的中心位置,以及添加标记等。 ```html <script> function initMap() { // 创建地图对象,将中心位置设置为指定的经纬度 var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.7128, lng: -74.0060}, zoom: 12 }); // 创建标记对象,将位置设置为指定的经纬度,并将它添加到地图上 var marker = new google.maps.Marker({ position: {lat: 40.7128, lng: -74.0060}, map: map, title: 'New York City' }); } </script> ``` 4. 最后,在HTML文件中调用该函数,使地图显示出来。在`<script>`标签中添加以下代码: ```html <script> // 在页面完全加载后调用initMap函数 window.onload = function() { initMap(); }; </script> ``` 这样,你就可以通过设置经纬度来在HTML生成地图了。上述代码示例中,生成了一个以纽约市为中心的地图,并在该位置添加了一个标记。你可以根据需要修改经纬度和其他参数来定位不同的位置,并添加其他标记或地图控件等。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值