JavaScript调用腾讯地图API（2）

一，引入地图API添加点标记。

        本例我们以洛阳市下属的两个区县作为案例来讲解。

        1.引入点标记marker，设置点标记的样式：

var marker = new TMap.MultiMarker({
        map: map,
        styles: {
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
    

  2.添加区县的坐标值，放在geometries:[ ]

       数组中每一个点的参数为一个对象，可以添加多个。

geometries: [
          // 点标记数据数组
          {
            // 标记位置(纬度，经度，高度)
            position: new TMap.LatLng(34.51462, 112.179187),
            fullname:"宜阳县",
            id: 'marker',
          },
          {
            position:new TMap.LatLng(34.389371, 111.652958),
            fullname:"洛宁县",
            id:'marker',
          }
        ],

3.实际页面渲染效果如下：

已经达到预期效果。

二.设置信息窗口，监测地图点击事件

        1.引入infowindow

var infoWindow = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(34.51462, 112.179187),
                offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
            },
            {
                map: map,
                position:new TMap.LatLng(34.389371, 111.652958),
                offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
            }
        );

在实际项目中，position中传入的坐标值不是固定的，可以把参数转化为new Tmap.LatLng(Lat,Lng),即可。

2.对infowindow设置点击事件，并把窗口信息初始值设置成close(0);

代码如下：

infoWindow.close();//初始关闭信息窗关闭
            //监听标注点击事件
            marker.on("click", function (evt) {
                //设置infoWindow
                console.log(evt);
                infoWindow.open(); //打开信息窗
                infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
                infoWindow.setContent(evt.geometry.fullname.toString());//设置信息窗内容
            })

如果拿不准窗口所需要的参数，可以在代码中console.log(evt):

发现我们所需要的名称在e.geometry.fullname 中存储。

3.页面渲染如下

备注：有讲解不对的地方还请大佬不吝赐教。