javascript怎么在地图中显示坐标并在坐标区

JavaScript021

javascript怎么在地图中显示坐标并在坐标区,第1张

你想要现成的是吧。好的，我给你写，以下代码复制下来，运行就能出效果

<!DOCTYPE html>    

<html>    

<head>    

<meta charset="utf-8" />    

<title></title>    

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    

</head>    

<body>    

<div id="allmap" style='width:100% height:500px'></div>    

<div class="info"></div>    

<script  src="http://api.map.baidu.com/api?v=2.0&ak=ysHscdqZCVZXG4ipXgXou2Wt"></script>    

<script>    

var map = new BMap.Map("allmap")    

var geol = new BMap.Geolocation()//Geolocation 就是用来获取到当前设备的经纬度，获取设备地理位置的可编程的对象    

geol.getCurrentPosition(function (rs) {    

if (this.getStatus() == BMAP_STATUS_SUCCESS) {    

    //初始化    

    var point = new BMap.Point(rs.point.lng, rs.point.lat)    

map.centerAndZoom(point, 60)    

    

    

// 创建标注，为要查询的地址对应的经纬度    

var marker = new BMap.Marker(point)    

        map.addOverlay(marker)    

            

            

        //坐标转地名    

        var geoc = new BMap.Geocoder()    

        geoc.getLocation(point, function (rp) {    

var addComp = rp.addressComponents    

document.querySelector('.info').innerHTML=addComp.province + ", " + addComp.city + ", " + addComp.district+ ", " + addComp.street + ", " + addComp.streetNumber    

})    

    

    

}    

}, { enableHighAccuracy: true })    

</script>    

</body>    

</html>

这里讲一下怎么样用d3.js，输入一个数据list，根据数据画一个带有坐标轴的简单直方图.

以下是目标效果.

引入d3.

<script src="//d3js.org/d3.v4.min.js"></script>

画矢量图需要画布，首先，创建新svg:

我的数据为一个数组： var dataset = [ 25, 6, 21 , 17 , 13 , 9, 6, 2, 20 ]

我想让我的直方图向右，纵向排列.

每一个矩形的x向长度既表示了数据的大小.

那么第一个要解决的问题就是，怎么把原始数据换算成像素，肯定不能直接画25px，6px...

这个时候就需要一个比例尺了.

d3提供的 连续比例尺 可以这么写：

定义变量linear为一个连续比例尺，定义域.domain，值域.range.

在这里，定义域 .domain([0, d3.max(dataset)])是指，我比例尺输入的数据最小为0，最大是原dataset里最大的那个数（25），所以输入比例尺的定义域为0到25，换算后的值域为0到400px，既——数据0对应0px，数据25对应400px.

有了长度比例尺，就可以画直方图了.

在这里，先定义了每一个矩形框框的高度为30px，

.data() 绑定数据dataset

.enter() 方法是专门用在这种，根据输入数据动态新建元素的情况下的，具体可以参考 官方说明 :

所以，在这里，我们既是根据输入 dataset 来新建 <rect>,

怎么根据呢？

属性设置里面:

表示的是，对于每一个新建的矩形 <rect>，x坐标为0，y坐标为序号*矩形高度+5px. （5px是矩形之间的空格）

可以理解为，在（0，0）放置一个高度为30px的矩形，再在（0，35）放一个，再在（0，70）放一个，再在（0，105）放一个...

而矩形的宽度要和我们的数据保持一致，所以width属性，输入了一个无名函数

这个函数是什么意思呢，当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：

有了直方图的矩形，我们现在来画一个 坐标轴 .

坐标轴有4种：

分别是什么样子的呢，我们来试一试.

在API使用规范里这样写到:

意思是，在使用坐标轴的时候，必须先添加一个 <g>元素，再 .call(axis) 调用axis. 而默认坐标轴都是从原点（0，0）开始画，如果需要调整位置，在属性 transform 里设置 translate(x,y)

所以，我们测试一下在（30，30）画一个 axisTop .

我们得到结果如下：

而每个坐标轴是由哪些部分组成的呢：

除此之外，我们还可以改样式.

我们知道了每一个坐标轴有一个 <path class="domain>，我们可以试试更改样式.

而且在每一个 <g class="tick">内部，有一个 <line>和一个 <text>.

<line>，这两个元素的可用属性可以参考 line , text

最终，实现效果:

一般画图都采用直角坐标系，偶尔也会采用极坐标系。

直角坐标系已经很熟悉了，不赘述了。

看图就明白我在说什么了。

画图一般采用横纵坐标系，但有时画封闭路径图或者比较有规律的散点图就可以用极坐标。

我把曾画过的极坐标系的图上传看下极坐标系的特点：

效果图如下，是不是有点像瞄准镜头：