Last active
April 15, 2016 01:37
-
-
Save jy00295005/11077920 to your computer and use it in GitHub Desktop.
create google map for my project
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // need two files | |
| // <script language="JAVASCRIPT" src="../js/infobox.js"></script> | |
| // <script language="JAVASCRIPT" src="../js/markerwithlabel.js"></script> | |
| var helper = {}; | |
| //map style array | |
| var style_pale = [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"landscape","stylers":[{"color":"#f2e5d4"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"road"},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},{"featureType":"road","stylers":[{"lightness":20}]}]; | |
| //helper中map会需要的函数放在此处 | |
| helper.map = { | |
| config: { | |
| map_id: 'google_map', | |
| mapOptions : { | |
| zoom: 2, | |
| minZoom: 2, | |
| maxZoom: 6, | |
| center: new google.maps.LatLng(20, 10), | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| styles: style_pale | |
| }, | |
| zoomInLevel: 4, | |
| pin_icon_url: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', | |
| tooltipOptions : { | |
| content : document.getElementById("infobox"), | |
| disableAutoPan: false, | |
| maxWidth: 150, | |
| pixelOffset: new google.maps.Size(-70, 0), | |
| zIndex: null, | |
| boxStyle: { | |
| "background": "#f0ad4e", | |
| "opacity": 0.75, | |
| "width": "100px", | |
| "border-style": "solid", | |
| "border-width": "1px", | |
| "border-color": "#646464", | |
| "border-radius": "3px 3px 3px 3px" | |
| }, | |
| closeBoxMargin: "12px 4px 2px 2px", | |
| closeBoxURL: "", | |
| infoBoxClearance: new google.maps.Size(1, 1) | |
| } | |
| }, | |
| pickMarkerIcon: function(item_Value) { | |
| reutrn_val = {}; | |
| iconURLPrefix = '/OA/assets/images/google_map/icons/'; | |
| if (item_Value <= 100) { | |
| icon_image = 'm1.png'; | |
| yIndex = 35; | |
| xIndex = 9; | |
| } | |
| else if (100 < item_Value && item_Value <= 300) { | |
| icon_image = 'm2.png'; | |
| yIndex = 36; | |
| xIndex = 12; | |
| } | |
| else{ | |
| icon_image = 'm3.png'; | |
| yIndex = 41; | |
| xIndex = 12; | |
| } | |
| reutrn_val.icon_url = iconURLPrefix+icon_image; | |
| reutrn_val.yIndex = yIndex; | |
| reutrn_val.xIndex = xIndex; | |
| return reutrn_val; | |
| }, | |
| resetMapCenter: function (_map) { | |
| _map.setZoom(2); | |
| _map.setCenter(new google.maps.LatLng(20, 10)); | |
| }, | |
| destroyMarker: function (markers) { | |
| for (var i = 0; i < markers.length; i++) { | |
| markers[i].setMap(null); | |
| } | |
| }, | |
| create_country_OA_maker: function (_map,_infoWindow,_infoWindow_tooltip,_country_data_marker,_insitute_data_marker) { | |
| zoomInLevel = helper.map.config.zoomInLevel; | |
| all_type_markers = {}, | |
| country_markers = [], | |
| inist_markers = []; | |
| if (_country_data_marker) { | |
| function createMarker_country(_country_data) { | |
| icon_val = helper.map.pickMarkerIcon(_country_data.value); | |
| var marker_country = new MarkerWithLabel({ | |
| position: new google.maps.LatLng(_country_data.lat, _country_data.long), | |
| map: _map, | |
| country: _country_data.country, | |
| icon : icon_val.icon_url, | |
| draggable: false, | |
| raiseOnDrag: false, | |
| labelContent: ""+_country_data.value, | |
| labelAnchor: new google.maps.Point(icon_val.xIndex, icon_val.yIndex), | |
| labelClass: "mapIconLabel", // the CSS class for the label | |
| labelInBackground: false | |
| }); | |
| marker_country.content = '<div class="infoWindowContent">' + _country_data.value + '<br></div>'; | |
| google.maps.event.addListener(marker_country, 'click', function() { | |
| _map.setZoom(zoomInLevel); | |
| _map.panTo(this.getPosition()); | |
| _infoWindow.setContent('<h4>' + marker_country.country + '</h4>' + marker_country.content); | |
| _infoWindow.open(_map, marker_country); | |
| }); | |
| google.maps.event.addListener(marker_country, 'mouseover', function (e) { | |
| _infoWindow_tooltip.setContent('<p>' + marker_country.country + '</p>'); | |
| _infoWindow_tooltip.open(_map, marker_country); | |
| }); | |
| google.maps.event.addListener(marker_country, 'mouseout', function () { | |
| _infoWindow_tooltip.close(); | |
| }); | |
| return marker_country; | |
| } | |
| country_markers = call_for_create_marker(_country_data_marker,'country'); | |
| }; | |
| if (_insitute_data_marker) { | |
| function createMarker (_insitute_data){ | |
| var marker = new google.maps.Marker({ | |
| map: _map, | |
| position: new google.maps.LatLng(_insitute_data.lat, _insitute_data.long), | |
| title: _insitute_data.city, | |
| icon: helper.map.config.pin_icon_url | |
| }); | |
| marker.content = '<div class="infoWindowContent">' + _insitute_data.desc + '<br><a href="#">Detail</a></div>'; | |
| google.maps.event.addListener(marker, 'click', function(){ | |
| _map.setZoom(zoomInLevel); | |
| _map.panTo(this.getPosition()); | |
| _infoWindow.setContent('<h4>' + marker.title + '</h4>' + marker.content); | |
| _infoWindow.open(_map, marker); | |
| }); | |
| google.maps.event.addListener(marker, 'mouseover', function (e) { | |
| _infoWindow_tooltip.setContent('<p>' + marker.title + '</p>'); | |
| _infoWindow_tooltip.open(_map, marker); | |
| }); | |
| google.maps.event.addListener(marker, 'mouseout', function () { | |
| _infoWindow_tooltip.close(); | |
| }); | |
| return marker; | |
| } | |
| inist_markers = call_for_create_marker(_insitute_data_marker,'inist'); | |
| }; | |
| /** | |
| * [call_for_create_marker 循环生成marker,并生成markers array] | |
| * @param {array} data 后台取回的查询结果：国家/机构 | |
| * @param {string} method 辨识标志，用来区分是哪种marker | |
| * @return {array} 返回marker的数组 | |
| */ | |
| function call_for_create_marker (data,method) { | |
| markers = []; | |
| return_markers = {}; | |
| for (i = 0; i < data.length; i++){ | |
| if (method == 'country') { | |
| country_marker = createMarker_country(data[i]); | |
| markers.push(country_marker); | |
| } else{ | |
| inst_marker = createMarker(data[i]); | |
| markers.push(inst_marker); | |
| }; | |
| } | |
| return markers; | |
| } | |
| all_type_markers.country_markers = country_markers; | |
| all_type_markers.institute_markers = inist_markers; | |
| return all_type_markers; | |
| } | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
gist change my format sorry about it