在指定的位置添加元素

来源：互联网发布：tonymoly的rd03是mac 编辑：程序博客网时间：2024/04/28 06:21

一、知识点总结：

1、在地图中指定位置添加元素：

                // 地图单击事件处理函数google.maps.event.addListener(map, 'click', function(event) {if (isAddedStatus) {addMarker(event.latLng);}});

// 在指定的位置添加元素function addMarker(location) {var marker = new google.maps.Marker({position : location,map : map});markers.push(marker);}

2、添加自定义控件：

                // 添加一个自定义的控件，用来确定是否单击添加元素var addControlDiv = document.createElement('div');var addControl = new AddElementControl(addControlDiv, map);addControl.index = 1;map.controls[google.maps.ControlPosition.TOP_RIGHT].push(addControlDiv);

            // 添加元素控件的构造函数 function AddElementControl(controlDiv, map) {                // 设置控件的样式controlDiv.style.padding = '5px';var controlUI = document.createElement('div');controlUI.style.backgroundColor = 'white';controlUI.style.borderStyle = 'solid';controlUI.style.borderWidth = '2px';controlUI.style.cursor = 'pointer';controlUI.style.textAlign = 'center';controlUI.title = '选择单击添加节点时，可以在地图上单击添加元素';controlDiv.appendChild(controlUI);// 添加一个checkboxvar checkBox = document.createElement('input');checkBox.type = 'checkbox';checkBox.id = 'isAddElement';checkBox.style.verticalAlign = 'middle';controlUI.appendChild(checkBox);// 添加checkbox对应的文本框var controlText = document.createElement('label');controlText.htmlFor = 'isAddElement';controlText.innerHTML = '是否单击添加节点';controlText.style.fontFamily = 'Arial,sans-serif';controlText.style.paddingLeft = '4px';controlText.style.paddingRight = '4px';controlText.style.verticalAlign = 'middle';controlUI.appendChild(controlText);                // 通过checkbox控制是否单击添加节点google.maps.event.addDomListener(checkBox, 'click', function() {isAddedStatus = checkBox.checked;});}

二、相关代码：

<!DOCTYPE html><html><head><!--学习在地图中添加图标，通过添加一个“点击添加元素”的CheckBox，当CheckBox为选中状态时，可以由用户在指定位置点击添加元素--><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><title>添加元素</title><style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style><script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script>// 地图对象var map;// 当前存放的元素var markers = [];// 中心位置var centerLatLng = new google.maps.LatLng(22.653047, 114.062986);// 当isAddedStatus为true时，可以在页面中点击添加元素var isAddedStatus = false;            // 添加元素控件的构造函数 function AddElementControl(controlDiv, map) {                // 设置控件的样式controlDiv.style.padding = '5px';var controlUI = document.createElement('div');controlUI.style.backgroundColor = 'white';controlUI.style.borderStyle = 'solid';controlUI.style.borderWidth = '2px';controlUI.style.cursor = 'pointer';controlUI.style.textAlign = 'center';controlUI.title = '选择单击添加节点时，可以在地图上单击添加元素';controlDiv.appendChild(controlUI);// 添加一个checkboxvar checkBox = document.createElement('input');checkBox.type = 'checkbox';checkBox.id = 'isAddElement';checkBox.style.verticalAlign = 'middle';controlUI.appendChild(checkBox);// 添加checkbox对应的文本框var controlText = document.createElement('label');controlText.htmlFor = 'isAddElement';controlText.innerHTML = '是否单击添加节点';controlText.style.fontFamily = 'Arial,sans-serif';controlText.style.paddingLeft = '4px';controlText.style.paddingRight = '4px';controlText.style.verticalAlign = 'middle';controlUI.appendChild(controlText);                // 通过checkbox控制是否单击添加节点google.maps.event.addDomListener(checkBox, 'click', function() {isAddedStatus = checkBox.checked;});}            // 地图初始化操作function initialize() {var mapDiv = document.getElementById('map-canvas');var mapOptions = {zoom : 12,center : centerLatLng};map = new google.maps.Map(mapDiv, mapOptions);                // 添加一个自定义的控件，用来确定是否单击添加元素var addControlDiv = document.createElement('div');var addControl = new AddElementControl(addControlDiv, map);addControl.index = 1;map.controls[google.maps.ControlPosition.TOP_RIGHT].push(addControlDiv);                // 地图单击事件处理函数google.maps.event.addListener(map, 'click', function(event) {if (isAddedStatus) {addMarker(event.latLng);}});}// 在指定的位置添加元素function addMarker(location) {var marker = new google.maps.Marker({position : location,map : map});markers.push(marker);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="map-canvas"></div></body></html>

三、运行效果截图：

0 0