google map api3 中添加标记

来源：互联网发布：运营美工表情包编辑：程序博客网时间：2024/06/10 02:50

效果如图

让用户自己添加标记```随意添加地图中的任意位置

这部分是谷歌地图的```

var map, geocoder,ismarker=0,marker;function initialize() {var latlng = new google.maps.LatLng(39.904214, 116.407413);var options = {zoom: 11,center: latlng,disableDefaultUI: true,panControl: true,zoomControl: true,mapTypeControl: true,scaleControl: true,streetViewControl: false,overviewMapControl: true,mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("map_canvas"), options);geocoder = new google.maps.Geocoder();google.maps.event.addListener(map, 'click', function(event) {if(ismarker==1){ismarker=2;placeMarker(event.latLng);}});}function placeMarker(location) {marker = new google.maps.Marker({position: location, map: map,draggable:true});var infowindow = new google.maps.InfoWindow({content: "标记是可以拖动的"});google.maps.event.addListener(marker, 'click', function() {          infowindow.open(marker.get('map'), marker);        });}function search(address) {if (!map) return;geocoder.geocode({address : address}, function(results, status) {if (status == google.maps.GeocoderStatus.OK) {map.setZoom(11);map.setCenter(results[0].geometry.location);} else {alert("Invalid address: " + address);}});}

这部分是调用了jquery和artdialog

$("#addmarker").click(function(){if(ismarker==2){art.dialog({title:'添加失败',content:'标记已经存在或者即将存在,请删除后标记后重新添加',lock:true,ok:true,cancel:true})}else{art.dialog({title:'添加标记',content:'现在单击地图任意一点即添加标记,<font color=red>标记是可拖动</font>,请把标记移到合适的位置',lock:true,ok:function(){ismarker=1;},cancel:true})ismarker=0;}})$("#deletemarker").click(function(){art.dialog({title:'删除标记',content:'你已经删除了标记',lock:true,ok:function(){marker.setMap(null);ismarker=0;},cancel:true})})

这部分是html

<div class="width margintop20"><div class="width200  left"><div class="right line-height30 size14">交换所在地(地图): </div></div><div class="left"><input id="map_address" style="width:200px;height:30px;border:1px solid #ababab;">  <input type="button" id="map-search-sumbit" class="login_btn" value="搜索"/></div></div><div class="clear"></div><div class="width margintop10"><div class="width200  left"><div class="right line-height30 size14"> </div></div><div class="left"><input type="button" class="login_btn" value="添加标记" id="addmarker"/>  <input type="button" class="login_btn" value="删除标记" id="deletemarker"/></div></div><div class="clear"></div>